5

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!

Community
  • 1
  • 1
Greg
  • 53
  • 1
  • 1
  • 4

5 Answers5

6

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.

Tigran Petrossian
  • 1,158
  • 1
  • 7
  • 16
  • 1
    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. – Greg Sep 23 '13 at 00:29
  • 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. – Tigran Petrossian Sep 23 '13 at 16:20
  • I've just solved the same problem here with this... The problem was that one of my titles was larger than 100%... Thanks :) – user754730 Aug 11 '14 at 19:43
1

This worked a treat Tigran.

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

div {
  box-sizing: border-box;
  }

Cheers!

Joff
  • 11
  • 1
1

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

DINESH MANIKANTHA
  • 21
  • 3
  • 1
    While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) 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. – rizerphe Jun 14 '20 at 07:47
0

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.

yesimherenow
  • 1
  • 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](/help/how-to-answer). – Community Jan 15 '22 at 02:39
-6

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) { }
Milan and Friends
  • 5,560
  • 1
  • 20
  • 28