What is the proper way to have everything be fixed width but stay in the middle of the page?

[lmoreau]

I’m not really wanting to deal with responsiveness as we all use the same displays here, so I want my application to stay in the middle of the screen and be basically 1000 pixels wide. I put everything inside of a group that’s 1000px wide and said to make it fixed width, but whenever I expand the window on my ultrawide monitor, the group doesn’t stay centered, it instead basically moves to the right as the screen gets wider, leaving tons of blank space on the left. Wondering how to fix that.

Second question, if I make a page a fixed width, that seems to work also, but my page has a black background, and if I make it fixed width, it then puts a white background on the left and right. So if I made a page 800px wide and set it to fixed width with a black background, and then my monitor is actually 1920px wide, it has 560px or so of just solid white on the left and right. Is it not possible to have a fixed width page but have the background not be white on both sides?

[philnauta]

1. Go into responsive mode and make sure the group fixed margin is set to center:

2. The page should be black and not fixed width. The group will be fixed width, as you said above.

[laurence]

I’ve had pages that work exactly like I want, and like Imoreau describes (except I use blue, not black.)

I have other pages that are not keeping the body centered as designed. Example:

In my application, I use a floating header and footer, and they always remain positioned properly.

I’ve removed all elements from within the body group. Otherwise the Bubble specification for the page and body group are like the other pages that do work.

However, the body (gray) is stuck to the right edge as seen in Responsiveness mode:

The floating header and footer remain centered as they should, but the body is behaving as though right-aligned.

This seems to happen randomly after doing a fair bit of work on a page that once worked properly.

Do I need to build an all new page with a fixed body group that remains centered and then copy everything else from the defective page into the new one?

Is there a way to tell Bubble to re-evaluate a page to fix this kind of thing?

[andrewgassen]

Are there other elements on the page the body group is overlapping with?

[laurence]

Right now, the page is pretty simple.

Group C is the one that is supposed to be centered but sticks to the right.

floatHeader and floatFooter completely contain their elements.

popSignupLogin, repopAddAction and repopDeleteAction are reusable popup elements with no particular positioning. (I think )

reAction is a reusable element with workflows but no contained elements. It is positioned at 4/1.

Unless you have another suggestion, I’ll start removing elements one at a time and test them until Group C is the only one left. I have a couple of other fires raging, so I won’t get to this for a few hours.

[laurence]

Andrew,

Here’s what I’ve uncovered:

Hidden Element causes misalignment of other element(s)

Edit 5/6/19 3:35pm PDT: As Petter and Duke point out, this is not a bug. However, if you encounter alignment/responsiveness problems, this may help, especially when you come to Petter and Duke’s explanations and tips. Original post and identification of solution: I don’t know if this is considered a bug, but it is extremely odd behavior. Because it is so odd and the cause is by definition invisible, it can eat up a lot of time to resolve if you encounter it. Here’s my simple scenario: Resp…

Perhaps a bug. Perhaps a subtle oddity of responsive behavior. Perhaps it isn’t even duplicatable by others and is the result of how I built the page over time.

In any case, I now have some idea of what to look for when my pages are misaligned.