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

[sudsy]

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:

• Regular group centered inside transparent full-width floating group
  (Here’s a bit more info)

• Center the actual floating group with just a single CSS property

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.

[psycholabdesign]

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.

[adamhholmes]

@psycholabdesign

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…

[psycholabdesign]

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

@psycholabdesign 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 eas…

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.

[bhavika.kaneria]

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!

[angus4]

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%

[ThatFizzGuy]

@sudsy

• Center the actual floating group with just a single CSS property

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.

@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!

[IljaIljitsj]

I’m also wondering about this, haven’t been able to get it to work so far

[IljaIljitsj]

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?

[pflanagan884]

Bumping this - I am trying to get the second solution to work but I don’t know where to put the CSS or how to format it. I haven’t used CSS before.

[remco.berg]

@sudsy

margin-left: auto;

EDIT: Never mind, placing a transparent group inside the FG then centering it works just as well.

I must be stupid, but where exactly does one add the margin-left: auto; to the floating group’s style?

[sudsy]

@remco.berg

placing the FG inside a transparent group and then centering it works just as well.

Unless you want/need to be able to click on what’s behind the transparent group.

@remco.berg

where exactly does one add the margin-left: auto;

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.

[notjrag]

This nailed it for me. Thank you

[dhavaljadhav39]

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

This is the editor page view

This is the FG margin setting

This is the result… FG at the Centre

[adamhholmes]

But that, of course, will only work at 1 specific screen width (in other words, it’s not responsive).

[dhavaljadhav39]

Ooh, yeah that’s correct, but anyways it was a easy and fun workaround… Any suggestions to make it responsive @adamhholmes ?

[adamhholmes]

Either of the two methods discussed in this thread are the way to do it.