Additional width in iOS Safari

HTML & CSS
1

Hi,

I just modified my website to make it more responsive on Phones (640px width only, I will add other screen sizes later). It works very well but when I scroll to the left with my finger in Safari iOS 7, an awkward white margin appears on the right side through the whole website. You can try it with my personal website.
I tried it in Safari on Mac OS X, it’s the same problem. But you have to scroll to the left to see it, you can’t see it when you scroll vertically only. And in fact you can’t see it when having a display width that is over 640px.
I set all my widths to 100%, so I don’t know whats the problem here.

Please help, thank you.

2

Hi LamboLight. Welcome to the forums. :slight_smile:

When setting widths, you have to be careful with things like padding, which is added to the overall width by default. This is causing your issue:

@media only screen and (max-width: 640px) {
#inheader {
font-size: 50px;
[COLOR="#FF0000"]padding: 5px;[/COLOR]
padding-top: 30px;
}
}

The white gap is the extra ten pixels caused by that padding.

These days, a nice way around this is to change the box model, by adding this reset to your styles:

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

It’s well supported, and makes life a lot easier. :slight_smile:

3

Hey,

thank you for your quick answer, I will try the additional code lines in css, thank you for the hint.

Paul.