Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
css, mobile-browser, overflow, viewport
Solution
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.
Note: You may also need to add `position: relative` to the wrapper div.
Problem
I have a website here. Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the `body` has `overflow-x:hidden`. 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 `html` or `body` tags. Even if I set the viewport to a specific width in the `<head>`: ``` <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?