html - 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.