How to stop overflowing border on mobile devices?

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.

See my answer [here](http://stackoverflow.com/a/17756714/2049063) to disable horizontal scrolling on a page — omma2289, Mar 25 '14 at 18:43
I tried that before I posted the question, and it doesn't work-for some reason the mobile browser lets you scroll with swiping anyway :( — b4rbika, Mar 25 '14 at 19:08
Does it? I can't see a scrollbar on desktop browsers... do you have a screenshot please? — b4rbika, Mar 27 '14 at 18:44

score 1 · Accepted Answer · answered Mar 26 '14 at 03:22

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.

Thank you sir - this has solved it! I'd tried to do it with transforms originally but the tutorials I'd found weren't very good that's why I resorted to the borders. Cheers! — b4rbika, Mar 28 '14 at 13:22

How to stop overflowing border on mobile devices?

1 Answers1