How to avoid horizontal scroll on mobile web with responsive web design?
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.
If is not working for mobile you should use the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale = 1.0,
maximum-scale=1.0, user-scalable=no" />
this will set the width to device width.
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)})