Website is displaying a white space on right side of screen in iPhone

Greg picture Greg · Sep 22, 2013 · Viewed 26.7k times · Source

I am having a problem on http://eiglaw.com -- an approximately 25px wide white space/border is showing on the right side of the screen on iPhone. I researched the problem on stackoverflow and these posts are relevant but when I tried the various solutions offered I have not been able to fix the problem:

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

Website body background rendering a right white margin in iPhone Safari

White space on right side of header on zoom

I had a similar problem on iPad but was able to fix it with 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 targeting the html and body elements with no luck. I have looked through the entire CSS file for problems with background images, margins, padding, overflows, etc., but am really stumped. Does anyone out there have any suggestions?

Many thanks!

Answer

Tigran Petrossian picture Tigran Petrossian · Sep 22, 2013

The trouble is in your <h3 class="menu-toggle">Menu</h3> (why h3, btw?), which appears to be wider than a viewport because of having width: 100% + some padding.

Try setting a box-sizing: border-box; to that element.