Mobile page has margin on the right side when I zoom out

Hey guys,

I was able to get my responsive page to a decent shape using the new Responsive Engine. But when I display the page on mobile, there’s a white margin on the right side. The site is displayed correctly, but when you “move” to the right or just zoom out, there’s a pretty big margin on the right.

I’ve noticed this on a few mobile versions of other websites (not built in Bubble), too - what’s going on here?

Hi @hs55! :slightly_smiling_face:

I’m wondering it it has to do with the page settings. Did you check the settings on the page itself (not the elements on the page)? This can cause margins on the side instead of letting the page shrink to the right size.

Sometimes the page can accidentally be set to “fixed-width”. If you double click on the page and un-check the “Make this element fixed-width” checkbox, it should do the trick - if that is the issue.

Let me know if you need a helping hand with this.


Join in fun gamified Bubble Challenges every week: NoCodeCourses.io

Hi Jordana,

Yeah, that’s what I initially thought, too but the page container layout is column and min width is 0.

Check every element on the page that none of them are set to “fixed” and width or min width larger than your page width. If this is the case, the page width will stretch to the largest possible element. You can right click on the browser and click “inspect” and then hover over the elements to see which one it is. This is the button in the top left corner…

Screen Shot 2022-01-26 at 11.56.26 AM

1 Like

Thanks a lot Vincent, this was the problem - one of the groups in the page container had min width super big and that’s what was causing the margin on the right.