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.
If anyone knows of any other techniques, please share.
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.
Glad that there is workaround, but still hope that Bubble will enable this by default to choose from.
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…
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.
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 support@bubble.io if you have any other questions/concerns/feedback/feature requests down the line!
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!
So I’ve been able to get the CSS-styling to work. I did it by adding an HTML element to the page, and having it refer to the element I wanted to change (“floatinggroup”). However, I’m not able to get the margin-left: auto; command to work (I added an opacity command just to check if CSS was working at all, and it is). Does anybody know what I’m doing wrong here?
Unless you want/need to be able to click on what’s behind the transparent group.
Any place you can include CSS in Bubble. Generally speaking, this can be at the app level, the page level, or within <style> tags inside a Bubble HTML element.
One of the most simple ways I aligned FG to Centre was adding Margins to floating group, in the editor it might seem off but when you will preview it, it would be at the Centre. Here are the screenshot