Forum Academy Marketplace Showcase Pricing Features

Here's how to center a floating group (new responsive engine)

This topic has come up quite a few times since the new responsive engine was released, so until Bubble provides a way to do this, here are a couple approaches:

The second approach requires fewer elements and less CSS than the first approach and simply involves adding margin-left: auto; to the floating group’s style. The only real drawback is that it won’t appear centered in the editor.

Also, if the FG is set to horizontally align to the right in the Bubble editor (default is left), then the CSS would be margin-right: auto;. I suppose both could be added along with !important to cover all the bases, but I like to keep things simple. :slightly_smiling_face:

If anyone knows of any other techniques, please share.

9 Likes

Thank you for the tip!

Strangely enough, that even if @bubble pushed new responsive out of beta to live, there still wasn’t an option to center the floating alignment of the FG horizontally. With only Left and Right positions available.

Glad that there is workaround, but still hope that Bubble will enable this by default to choose from. :slight_smile:

@psycholabdesign

Glad that there is workaround, but still hope that Bubble will enable this by default to choose from. :slight_smile:

I think the issue is not so much with Bubble, but due to the fact that (as far as I understand) CSS doesn’t have a ‘float centre’ property (only left or right) = hence the need to use one of the above ‘workarounds’…

Although I’m sure Bubble could, in theory, incorporate the the required CSS internally, and just give us an option to ‘centre’ it to make it easier for people who aren’t comfortable adding custom CSS…

I see, thanks.

Though I’ve looked it up for CSS float property, I get that in the traditional styling there is no such thing as “float: center;”.
But also we’re talking Bubble here, and thus providing more options by overriding styles in order for ease of use - theoretically could be possible.

1 Like

Hey there, thanks for flagging! I’ve gone ahead and submitted this as a feature request for our Product team’s evaluation. Feel free to reach out at [email protected] if you have any other questions/concerns/feedback/feature requests down the line! :slight_smile:

3 Likes

And how about this solution:
FG, make it Align to Parent, Max width - empty.
In the FG insert a Group with all the info/data you need, with Max width of 100%

@sudsy thanks for posting, very helpful! Silly question, but where does one make that CSS change (margin-left: auto) within the Bubble editor? Do you have to give the floating group an ID, and then target the ID thru an invisible HTML element on the page? Or is there an easier way? Thanks!