How to stop overflowing border on mobile devices? - html

Question

I'm using a slight hack to have diagonal borders between sections on my page (because I couldn't find a different way to make it work), which consists of having a super thick border added to the 'border' divs. It's fine on computers but on phones (all the ones I've tested on) the divs holding the thick borders stick out and you can scroll horizontally into 'empty space' on the page, only seeing the borders sticking out. Does anyone know how to stop this, or suggest a different way to create the diagonals?
The page is responsive and fills the browser window, that's why I needed a huge border size to be sure it'll be there even on HD displays...
.border-black-white {
border-color: transparent transparent #fff #2d2d2d ;
border-width: 0 0 60px 2600px;
border-style: solid;
}
.border-yellow-white {
border-color: transparent transparent #fff transparent ;
border-width: 0 0 60px 2600px;
border-style: solid;
}
section {
width: 80%;
margin: 0 auto;
padding: 3em 10%;
}
Here is a fiddle with all the code: http://jsfiddle.net/UnX72/
Thank you!
Update: I already tried overflow: hidden (or overflow-x:hidden) and it didn't work.

Answer 1

Well i think is not possible to hide the overflow created by a border not even on desktop browsers or at least not in any of the ones i have installed, i've tried a similar approach than yours to test this and also got the same problem, so i think is better to do it with out using borders, so i created a div and placed another one (with a pseudo element) and rotate to get the same effect, so my guess is that this should work just right for what you want, if not at least i hope it gives you another option.
Here is the jsfiddle Demo
Html
<section>
<div>
<p> Section 1</p>
</div>
</section>
<div class="diagonal">
</div>
<section>
<div>
<p> Section 2</p>
</div>
</section>
<div class="diagonal"></div>
<section>
<div>
<p> Section 3</p>
</div>
</section>
<div class="diagonal"></div>
Css
section {
width: 80%;
margin: 0 auto;
padding: 3em 10%;
background: red;
overflow:hidden;
}
.diagonal{
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
}
.diagonal:after{
content: '';
height: 40px;
background: black;
display: block;
position: absolute;
top: -39px;
left: -5px;
width: 200%;
transform: rotate(7deg);
-ms-transform: rotate(7deg);
-webkit-transform: rotate(-2deg);
}
Here you can check the compatibility of the rotate property
http://caniuse.com/transforms2d
Note:
Depending on the size of the container the "diagonal" will need to be offseted to the right position, you can do so using media queries, or javascript.