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:
Hi @chrismchewols 
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”?
Done. Thank you
Got it! 
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!
7 Likes
That cleared it up. Thank you!!
1 Like
Awesome! No problem at all!
1 Like
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!
2 Likes
So glad to hear it was helpful, @SerPounce! 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!
1 Like
Very helpful, but is this a bug in bubble? or something intentional?
Hey @crathbun! Great question; I’m not 100% sure about this, but I think it is intentional since the “Explain Box Margins” text states that the margins won’t shrink until the elements break to the next line.
1 Like
Yep that logic makes sense. I wish there was a way to directly manipulate and override the margins in a settings box but hey, I guess there is a workaround so it works in the end!
I’m so glad I found this