Responsive design is moving all of my content around

I’ve been ridiculed before on this site for not reading the manual or watching tutorial videos, but I can assure you I have done my homework and there are a lot of things that just aren’t making sense to me.

The main issue:
I don’t know if an update came out that changed the way responsive design works, but I haven’t worked on this project in a couple weeks. When I last worked on it, everything was working perfectly. I still had a lot of work to do, but nothing was aligning wrong on the page. I signed in today and everything is wonky.

Today, before I activated responsive design on a page (when it was all fixed width), everything lined up perfectly; the items on the web page were in a fixed position. I understand that with responsive web design, items need to move in certain ways, but I am yet to find a way to make them move or stay the way I need them to.

After turning on the responsive functionality for a page, everything aligns left. The header and footer I can re-position to the center of the page, but anything in-between, in the actual body of the page seems to stick as far to the left side as possible, no matter where I actually place it in the UI editor. Even if I align it center, all it does is move it a little bit over from the left side of the page, but it still isn’t even close to lined up with the header and footer, even when that’s how it is placed in the UI editor. I’ve tried adding all of the items to a group, changing and modifying the responsive functionality of each object individually, but ultimately nothing I’ve done has worked.

The only thing I’ve found is if I edit the properties of the object so that it’s super far on the x-axis that it doesn’t even show up in the UI editor, it will align the way I want it to in preview. However, when the screen shrinks, it doesn’t drag over with the rest of the page, like the header and footer, it just stays all the way on the right. It’s like I can’t have a full page of information because only the things on the far left of the page are going to show up on smaller screens.

Before you answer, please be supportive. I’ve been ridiculed and bullied on this site for asking questions - this is what a forum is for. I have years of web design experience, but that doesn’t mean I should all of a sudden know how to use Bubble after just a month or so of using it. I’ve read the manual, I’ve watched the videos, and I’ve combed the forums for similar issues and am yet to find anything that matches my problem. If you don’t have anything nice to say, please move onto the next post.

I’m here to seek help and help others when they need it. A forum should be a place of positivity. No questions are stupid ones.

Thank you so much in advance :slight_smile:

  1. Try taking anything that requires a fixed width and putting it into a group with a max width of 100%.

  2. Take anything that is currently a fixed width that does not have to be and put it with a max width of 100% and minimum of (eg 99%) or whatever you need. The 100% max width rule is especially true when it comes to items that need to be centered within a group or page.

  3. Post an example URL for us to see. That will help people respond with some good insight.

1 Like

The most helpful thing to do is to post a link to your editor, set to “Anyone can View.” Without that, it’s nearly impossible to advise, since there’s an almost zero percent chance folks build apps the same way.

Responsive is tricky, no doubt about that, but there are a ton of folks on the community that can help. If you’re not comfortable sharing your editor, you can always book a one-on-one session with someone like @romanmg or @copilot