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

Question

I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode

Answer 1

I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.

Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).

Answer 2

I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.

Answer 3

I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.

Answer 4

Fixed! Had a similar problem. Fixed it by setting the width to a current device width.

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
}

Answer 5

I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.

Answer 6

SOLVED ¡¡

Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.

A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:

width: auto;
overflow-x: hidden;

But this solution is only partial. Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:

width: auto;
overflow-x: hidden;

In my case add to the class "span" these two lines to finally look like this:

[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;

And it´s working now¡¡