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 🙂
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: hiddento that div and it sorts it out! Hope this is useful to others with a similar issue.