Need help on Page alignment

While viewing my app in mobile, my index page has some additional space to the right, which makes my page shift sideways. I am presently using the free version of bubble. The “Built on Bubble” banner appears on the bottom right of the index page. All the other pages are fine.
What am I doing wrong? Appreciate your help.
Thanks

These types of issues drive me nuts. Over time I’ve found some ways to track the ‘rogue element’ causing the issue.

I do not believe that would be the issue.

Things to check first that may seem elementary are whether or not the page width is set to fixed, or perhaps has a minimum width setting causing it to not shrink width below a certain threshold (ie: min width setting), and that the page itself is not ‘fixed’.

If the page settings are correct, and all elements are responding to width changes correctly, but you get a horizontal scroll bar on bottom and some dead white space on right, that usually is a ‘rogue element’ that has width setting issues, again, similar to what the page may or may not have in terms of min width or fixed width.

In order to isolate the element that causes this, I use my desktop with a browser responsive tools open to expand and collapse my page. Then when I see the issue I can use the browser inspector tool or Bubble debugger inspector. My first preference is bubble debugger inspector as it will show as you hover over elements, but at times it covers too much of the screen and I can not access the entire page to find all potential elements.

That is when I’d use the browser inspector tool. I’m not that good at it, but it at least allows me to track down which element is the issue.

Thank you so much. I’ll go through the entire page to find the rogue element. Appreciate you.

1 Like