[SOLVED] How to centre element inside a floating group

Did you know that we can not centre element inside a floating group because you can only set it to align left or right, not centre.

Try this, make a floating group full width and stick a button in the centre. Preview the page and slowly drag the page narrower, at some point it will no longer remain centre and will go off to either the right or left.

You can try and put a normal group inside the floating group and centre the button inside that, but same thing happens.

This problem means I can not make a mobile responsive footer navbar because it never remains cantered.

Maybe some screenshots or links would help clarify the problem (centring elements inside floating groups is working fine for me, so perhaps it’s to do with your responsive setup?).

1 Like

Have you tried bumper groups

I’ll show the step by step creation for my footer nav bar.

Step one, I create a reusable element, width is 1100px (full page width) with an inner group 900px cantered.

Step 2. Create 5 text links inside individual groups and make responsive.


Step 3. Add floating group (centred) to bottom of page and check it ‘floats’ correctly in Preview. Set to ‘bottom/left’ position.

Step 4. Insert nav bar and centre it.

Step 5 . We see it fails to enter. I have set the orange group box to centre within the responsive settings.

Things to note: I believe that using a reusable element inside a floating group is not possible in Bubble, which is why it fails?

Maybe share an editor link.

I’ve just repeated your exact steps outlined above and it works fine for me, so I’m guessing somewhere you’ve got some responsive settings incorrectly set up.

It’s hard to tell just from the screenshots.

1 Like

Sure, thanks Adam … it’s really been a strange problem. Editable link here 34jhg876g | Bubble Editor

Feel free to change anything, this is a copy of the main project.

There you go, fixed.

You had a minimum width of 78% on the floating group, hence why it wouldn’t reduce in size any further.

2 Likes

Thank you Adam! That was a simple fix for a really annoying problem! Have updated the post title to make it easier for others to search for this solution.

2 Likes