How to group content (of fixed width) centralised in the middle of the page, irrespective of the floating left menu

Hi group,

I’m trying to set up a page that will have a floating left menu bar, which should always hug the leftmost part of the screen (regardless of screen size).

I’d also like to set one main content group to be centralised (and the exact same fixed width for each page so that it fits desktop and anything bigger) in the middle of the screen, whatever the screen size is so that content is visible on various device sizes.

So far I’ve been setting the central group to be aligned relative to the left floating menu, which doesn’t really work. Am I overlooking something simple in how to centalise the main group? Is there a way to achieve what I’m trying to do?

The first pic illustrates if I set my fixed width central group to the left menu. If I set it to a certain px number then on very large screens I think my central content would move to the left.

The second illustration shows what I’m trying to achieve which is similar to what Loom seem to have in place. The central group content stays the same size on laptops and upwards until a certain <px is reached and then it cascades.

I know we are are in the age of responsiveness but I think this centralised fixed content would suit that I’m trying to achieve in my app.

Is this easily possible in Bubble. - am I overlooking something simple and easy to implement this.


Hmm, I get where you are going. I could try something like that. On the surface, that feels like good thinking. Thanks.

Just played around with this and was running into some snags (one being yep the col height would need to be set).

Think I might go back to the more standard format of page set out).

Cheers for your effort in this

1 Like

Someone just sent me this advice which so far I’m having luck with. Might suit your needs too.

If I am understanding correctly you would have 3 groups defining the layout. Group 1 would be your floating group on the left. Group 2 would be a standard group on the right that fills the available space but with a left margin of the same width as your floating group. Group 3 would be your content group inside group 2 which would have a max width set and be centre aligned in group 2.

1 Like