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
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:
I find it helpful to resize the page big and small and click the explain margins for each. Sometimes that helps me understand how Bubble sizes things as the page changes.
I see that your left margin is 49px and right is 45px. So, it’s not quite 50%/50%. And, while that looks close enough when the page is stretched, when it’s 1px and 3px extra space Bubble will often make the right margin 3x bigger. So, moving it so that it’s 47 & 47px may fix the problem you’re having.
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)?
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.
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!