Im having trouble understanding why my groups that are set up the same, behave differently. I have three groups (not floating), all are center aligned like this on
But when I go to view them Two are left aligned and one works correctly. Here is what it looks like
Did you try clicking the box on the left of the responsive section labeled “Explain box margins” …this is a good way to understand why Bubble is doing what it’s doing.
Yes but I really don’t get what its telling me nor how it helps.
I want the groups to be fixed width so the text inside doesn’t change. and I want the group to be centered regardless of browser width. Clicking fixed width and centered should do that. I really dont understand how anything else is interpreted from this.
So, using “explain box margins”, with fixed width and centered while selecting the group im interested in I would expe3ct the result to be something like “left edge and right edge are equal and each one half the length of browser window width minus the group width” but instead:
it tells me the left margin references itself, and the right margin references a different group, and I cant select anything to change those.
A few thoughts:
“49px and right is 45px”
Right, but since I want it centered…why am I responsible for defining those (and how do I define those anyway, (other than dragging a border in the UI builder)?
OK, so I stretched it out. and now it says:
Which is basically what I want it to do (stretch the margins) but I want it to stretch them equally. Are the stretching in proportion to the original amounts? hmmm ratios are similar… Lemme see if I can center it in UI builder, then try again
If you go to UI Builder tab (not responsive) and then center the element within the parent, it’ll then be centered (unless it ends with an odd number of pixels to allocate, so then maybe shrink the element by 1px.). That should fix the 45px / 49px issue.
Note, in responsive the “Center” choice doesn’t fully center the element but instead has the element adjust based on the left and right margin as the page expands width. If you chose, say, left aligned it’d keep the element 49px from the left for as long as possible when the page is stretched or shrunk. So, there’s a difference between centering the element and setting the responsive setting for margins to centered.
that was the problem. OK I’ll try to fix the other pages now.
I just love not understanding something ( centering issue) and finding the exact answer with instructions 
. Thanks @sridharan.s, that was right on the spot ( for me at least 
)!
I’m having a very similar issue (as you may know since you responded on my other post). I’ve centered the element in the UI builder, but it still doesn’t fix the issue of it moving. Any tips as to what I’m doing wrong? Also, while I’m not a beginner, I’m not familiar with the Responsive tab and some other tools, so I may need slightly more specific instructions if you are able to. Thank you for your time!
