Mobile page moves side to side

On the mobile version of my website all the pages can be dragged side to side and when using an input on the right side of the page it will focus on the input which will then offset the page to the left and I have to move it back to center. I’ve had trouble finding much information on this.

1 Like

There should be something with fixed width in your page. If all the containers/elements have some kind of percentages or min-max widths, this shouldn’t happen.

Fixed width is not the biggest problem of course. Many smaller items may have fixed width. But the fixed width is wider than the screen width, it is a problem and a reason to be dragged left-right.

1 Like

I remember how much I battled this problem when I was trying to make my first app mobile compatible.
As @hergin says, the problem is that some element is overflowing past the page, forcing the browser to create some whitespace past the page.
This could be because of something set to fixed width, or a min width which is too high. Go through your elements to find the culprit(s)
You could also use the debugger to try to something sticking out the page.

1 Like

I’ve had a similar thing happening. It’s got to be some element that is larger than the rest of your set size. E.g if everything is set to let’s say 320px max, but something is 370, you’re gonna have the space. So figure out what element causes that… it’s 99% that

I’ve looked over my page and the only thing I found was the title I had at the top of each page had the max width set as “inf”. I thought that would be it, but it’s still doing it. All my groups(pages) are set at 100% width and everything inside is either 100%, less, or a px that is so small it wouldn’t affect it. I will continue to look

A little more info that may or may not help. I’ve created a one page app where each “page” is a group which shows only when the corresponding button is pressed. I don’t know if that would in any way affect it. Each group(page) is set to 100% width