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

css overflow viewport mobile-browser
Indigenuity picture Indigenuity · Jan 11, 2013 · Viewed 208.3k times · Source

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?

Answer

Indigenuity picture Indigenuity · Jan 11, 2013

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.

Related questions

Limit text length to n lines using CSS

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically). text-overflow: ellipsis; only works for 1 line text. original text: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, …

Read More
CSS text-overflow in a table cell?

I want to use CSS text-overflow in a table cell, such that if the text is too long to fit on one line, it will clip with an ellipsis instead of wrapping to multiple lines. Is this possible? I tried …

Read More
HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to …

Read More