Website is displaying a white space on right side of screen in iPhone
Solution 1
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.
Solution 2
This worked a treat Tigran.
I just added a global class at the top of my stylesheet:
div {
box-sizing: border-box;
}
Cheers!
Admin
Updated on January 15, 2022Comments
-
Admin over 2 years
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!