Indigenuity Indigenuity - 1 year ago 92
CSS Question

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

I have a website here.

Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the


In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the

Even if I set the viewport to a specific width in the

<meta name="viewport" content="width=1100, initial-scale=1">

The site expands to the 1100px but still has the whitespace beyond the 1100.

What am I missing? How do I keep the viewport to 1100 and cut off the overflow?

Answer Source

Creating a site wrapper div inside the body and applying the overflow-x:hidden to the wrapper INSTEAD of the body or html fixed the issue.

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download