Search code examples
csstwitter-bootstraprotationresponsive-designmobile-website

Bootstrap responsive css and/or viewport issue/bug on rotation of a device

I've currently got a problem in my website http://www.peterfox.me, when ever viewing it with a mobile device, (iPhone, Nexus 4) rotating the screen seems to screw up the size of the body/html, is this a bug in Bootstrap's responsive CSS? or is it a key problem in my site? Or even just a general problem with mobile browsers?

The symptom of is generally you go from portrait to landscape or start in landscape and rotating to portrait leaves the page being viewed as if it was still the width of landscape proportions when in fact it's in portrait leaving a gap, please see screen shot before rotation and screen shot after rotation for a better understanding.

Solution

  • fixed it in the end with

    html, body {
    overflow-x: hidden;
}