I have a page where you can scroll left on mobile. I have already tried .js, max-width 100%, overflow-x:hidden (on both body and html), all with !important. It only happens on this page, and only on mobile.

How do i fix this? Im open to any ideas

CodePudding user response：

it's hard to answer a question without it's code but I think I already know your problem

overflow-x:hidden; is a good idea but it will prevent your elements from OVERFLOW, in your case since you're testing your page in mobile it's not OVERFLOW it's one of your element's margin or padding or wrong width

so to find that element right click on your page (in desktop) click on Inspect Element Choose Responsive Toggle Button (in the top bar of inspector tab) resize your page onto sizes with error, right click on body element choose "expand recursively" and look for element that is causing extra space (hovering in your codes will highlight them and you can see their box-model sizing and find your buggy bug)

the problem is solved when you find it! you can remove extra width or margin or padding from it