How can i make a fluid website?

Hello everybody !

My website is fixed and I want to make it fluid like this one :
http://workwithtribe.co/?utm_source=bubble

Or maybe responsive if that’s possible :slight_smile:

You can’t do responsive or fluid layouts – that site is most likely floating elements that make it look somewhat fluid/responsive. There are many posts asking when it will come. This one even has a comment that it’s coming soon from December. Is bubble Responsive?

We can only hope that it’s right around the corner.

Other posts

1 Like

I thought that was a bubble site ?

It has a mobile view, which bubble can do.

@NigelG A mobile view and fluid layouts are two completely different things. I keep seeing comments about “just build a separate mobile view” repeated across many posts. I note that we may have a differing opinion on how best to develop our sites, but some concepts like being able to specify percentages have been around for so long it’s crazy that they weren’t built into Bubble from the beginning.

Not to mention that Google actually prefers responsive design over separate mobile views and will actually rank responsive designs higher.

Having a fluid layout is also different than Responsive/Adaptive layouts. I can understand that moving to responsive design within Bubble may have technical challenges, but at least give us the ability to specify percentages (fluid) instead of pixels (static).

Additional reading on the different types of layouts:


Except you pointed at a site made with bubble… and said “I want to make my bubble site fluid like this”.

Unless tribe has some extra secret sauce… then that site does what you want doesn’t it ?

Maybe I am missing the point here. But if that site does it … so can yours.

1 Like

@NigelG I only answered the OP’s question and explained that the site isn’t fluid. What they did was set their page(s) to “centered”.

They are still using a fixed width of 1100px for their main content area and if you scale your browser to smaller than their width then you will start to cut off the page and get a horizontal scroll bar.

So while @Armand may be able to achieve what the example site is doing, it is not a fluid or responsive layout.

2 Likes

But it is what the OP wanted :slight_smile:

Complete agreement about the need for fluid/responsive … But if the site looks good…

Is it what the OP wanted? We’ll have to wait for @Armand to respond. The subject of the post is “How can I make a fluid website?”. :wink: The answer to that is, you can’t, at least not yet and the site you’re showing as an example is not really fluid.

If the question was “how can I copy this site?”, then the answer would have been easier. :stuck_out_tongue:

3 Likes

Thank you guys !

I didn’t use the rights words but I have my answer after all.
So Tribe is not fluid but “Centred”, and that’s good for me :slight_smile:

2 Likes

Funniest thing I’ve seen today:

Yep. A “leading Bubble certified agency” uses typeform to collect potential client’s data.

2 Likes

@lonetour I laughed at that too.

Hello Guys ! I need you again :slight_smile:

I centered my web site, and it’s far better like that. But I still have a scroll bar at the bottom of my page.

How can I get rid of it ?

This is my website : https://lebob.bubbleapps.io/version-test/index/sample:user?debug_mode=true
This is my page settings :

1 Like

I don’t see a horizontal scroll unless I make the browser smaller than 980px, if that is what you mean. There is no way to not have that scroll at screens smaller than 980px. We can only keep requesting that Bubble implement fluid/responsive features.

Yeah… I remember back in my hard-coded HTML and CSS times I used a lot of percentages and “em” unit to my text. But I could adapt to the “viewport” stuff too… I feel it as harder to use but at least would be something.

1 Like