How to avoid horizontal scroll on mobile web with responsive web design?

Question

I've an adaptable web application. To avoid horizontal scroll I've written the following CSS code:

html {     overflow-x: hidden; } 

This works fine on desktop, but not on mobile. If I display the app on a mobile device, the app adapts fine. The problem is when I do scroll from right to left. The page moves a bit. I want the page to not move horizontally.

Edit:

The page doesn't scroll on all mobile devices. I've tried it on two devices with the same version of Android and it only scrolls on one of the devices.

Answer 1

Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.

Shown here http://jsfiddle.net/wzZ3W/

Code

<div id="fillX">     <div id="childXFill">     </div> </div>  #fillX {     background:red;     width:100%;     opacity:0.5; }  #childXFill {     background:blue;     width:100%;     padding:10px;     opacity:0.5; } 

Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/

Also, use a CSS Reset.

---

If you wan't to use overflow: hidden you should probably set it on the body element too. Like so

body, html { overflow-x:hidden; } 

Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.

Answer 2

You can put this in your console to outline all block/div. Then you can find the one which is outside of your container.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})