Geek Answers Handbook

Website displays a space on the right side of the screen on iPhone

I have a problem with http://eiglaw.com - on the right side of the window, approximately 25 pixels of space / border are displayed. screen on iPhone. I investigated the problem in stackoverflow and these posts are relevant, but when I tried the various suggested solutions, I could not solve the problem:

Responsive iPhone website - unwanted white space to rotate from landscape to portrait

Website background fragment displaying white right margin in iPhone Safari

Space on the right side of the header when scaling

I had a similar problem on the iPad, but I was able to fix it using this media query:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) /*and (orientation : landscape)*/ { html, body { width:1000px; } }

I have tried various media queries aimed at html and body elements with no luck. I looked through the entire CSS file for problems with background images, margins, padding, overflows, etc., but actually really looped. Does anyone have any suggestions?

Many thanks!

+4
source share
3 answers

The problem is in your <h3 class="menu-toggle">Menu</h3> (why h3, btw?), Which seems to be wider than the viewport due to width: 100% + some additions.

Try setting box-sizing: border-box; on this item.

+5
source

It helped Tigran.

I just added a global class to the top of my stylesheet:

 div { box-sizing: border-box; }

Hooray!

+1
source

try it

iPhone 5 - Landscape

 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }

iPhone 5 - Portrait

 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }

iPhone 4

 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
-5
source

More articles:


All Articles