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

Question

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!

Governess

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

Forcible

This completely worked! So the lesson to take from this is that any element having a width of 100% should not have any left or right padding. If it does, iOS will add that and display a blank area to the right equal to that extra padding. – Governess

That's not about the iOS, problem is reproducible on other browsers as well. Whenever you use width: 100% with padding, you must set box-sizing: border-box; to avoid overlapping. – Forcible

I've just solved the same problem here with this... The problem was that one of my titles was larger than 100%... Thanks :) – Brachy

Answer 2

This worked a treat Tigran.

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

div {
  box-sizing: border-box;
  }

Cheers!

Banka

Answer 3

Use the following styles:

body{
  overflow-x: hidden !important;
}

this will remove the overflow on the both side of the screen i.e extra white space on the screen

Klug

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – Provinciality

Answer 4

iOS is trash and the only way to find a solution to why half your screen goes white and you keep scrolling into it is becoming a friggin programmer apparently.

Balneal

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Flabbergast

Answer 5

Try this

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) { }

Robbynrobe

Don't know, because that I said "Try this". – Robbynrobe