Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left

Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.

If you need to see anything further, just me know :)

like image 582
ellawson Avatar asked Nov 04 '11 03:11

ellawson


People also ask

How do I force horizontal orientation in IOS?

On an iPhone with a Home button, swipe up from the bottom of the screen to access it. On an iPhone without a Home button, swipe down from the top-right corner of the screen instead. Here, tap on the rotation lock icon (which looks like a lock with a circular arrow) to turn it on or off.

Why is my iPhone screen stuck on landscape?

Swipe down from the top-right corner of your screen to open Control Center. Tap the Portrait Orientation Lock button to make sure that it's off.


2 Answers

Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.

To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.

like image 61
ellawson Avatar answered Sep 22 '22 08:09

ellawson


I had the same problem, I fixed it by setting:

html, body { width:100%;  overflow:hidden; } 
like image 22
Eva Marie Rasmussen Avatar answered Sep 23 '22 08:09

Eva Marie Rasmussen