Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolling. How can we prevent this horizontal scrolling effect on mobile devices when using this method?
Here is the link to my jsfiddle: http://jsfiddle.net/kzgvL6ba/
Here's an example of my code:
<body>
<article>
<div class="extendfull">Full-width Bars</div>
</article>
</body>
CSS:
body
{
overflow-x: hidden;
}
article {
background-color: #DDDDDD;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
display: block;
margin: 0 auto;
padding: 0 10px;
width: 60%;
}
div.extendfull {
background-color: #ccf;
border: 1px solid #66c;
font-size: 1.8em;
font-weight: normal;
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
Thank you!