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!
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.