Forum Documentation Showcase Pricing Learn more

Margins around centered element in header not squeezed

#1

New to Bubble. Need help with Responsiveness. I have a button centered in my header but the margins around the button are not being squeezed. This is forcing elements into multiple lines prematurely. Here’s a link to the issue in a test environment:

Header Test

Why does my group stack when it has space?
#2

Hi @chrismchewols :slight_smile: Welcome to Bubble! I think the app may be set to private; can you temporarily set it to public by going to Settings --> General --> Application Rights and selecting “Everyone can view”?

#3

Done. Thank you

#4

Got it! :slight_smile: So this is very confusing but when you have a left fixed-margin element, a centered element, and a right fixed-margin element, the margins between those elements will not be squeezed beyond their original width (their original width is the size that they are in the UI builder).

Bubble will only begin to shrink the margins after the elements break to the next line, as shown when clicking on the centered element and selecting “Explain Box Margins”:

As a workaround, you can place transparent shape elements between those elements (almost like ‘spacers’), in place of the margins, and set their minimum width to something very small (e.g., 1%). As the page decreases in size, those elements will shrink and it will look as if the margins are decreasing.

In other cases when you only have an element on the left (set to fixed-margin left), and an element on the right (set to fixed-margin right), without a centered element in the middle, the single margin between those elements will shrink. However, because of the centered element here, the margins will not shrink beyond their original width on the first line. Please let me know if I can clarify anything or if you have any questions!

1 Like
#5

That cleared it up. Thank you!!

1 Like
#6

Awesome! No problem at all! :slight_smile:

#7

faye, you legend! I was pulling out my limited hair on the same problem and your transparent spacers fixed. Phew that was frustrating until I just saw this post. Thank you!

1 Like
#8

So glad to hear it was helpful, @SerPounce! :slight_smile: It’s my pleasure! Feel free to let me know if you get stuck when working in the responsive editor and I’d be happy to take a look!