Forum Academy Marketplace Showcase Pricing Features

[Solved] Responsive Element Behavior Not as Expected

I have a header with two responsive elements - one Icon left aligned and one text center aligned. The margins on each appear to have plenty of room to compress, but the margin explanation is indicating the margins can’t be squeezed and the centered text keeps dropping to the next line immediately as the screen gets smaller.

The behavior I was expecting here was for the text to remain centered on on the same line, but something I can’t see is triggering the drop.

I’m guessing this is something I’ve just not set up right, but wondering if anyone else has run into a similar issue and found a fix?

I’ve seen that happen as well. Couldn’t understand what was going on…

Try grouping those 2 elements and setting the group to fixed width (or setting a width minimum)

Can you share a link? I just want to make sure this is normal.

Thanks everybody. @romanmg thanks for the suggestion…I gave that a try and am seeing the same thing happen as before. @emmanuel - sure, here’ s a link: http://cubclub.co/version-test/header_testing?debug_mode=true thanks for having a look.

Right, so Bubble preserves margins more than elements widths, as you see on responsive websites. But it’s easy enough to change that if you need: see what I did with some shapes. If you make them without background they’ll be invisible.

2 Likes

Thanks @emmanuel - based on what you did I just made the text element as wide as the floating group then layered an icon over it in a separate test lower down that same page. As you said, working with element widths vs. margins made this work. Super helpful to know and thanks for taking the time.

1 Like