Overflow-X:Hidden Doesn't Prevent Content from Overflowing in Mobile Browsers

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

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.

Overflow-x:hidden doesn't stop content from overflowing on mobile browsers

Fixed elements do not have an inherent height.

So, either provide a height: 100% or remove position: fixed.

Overflow-x:hidden; on mobile device not working

Found the answer actually here on Stack overflow:

The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.

Documentation:

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

The bad thing is that it prevents the use now of a jquery plugin, that scrolls....

overflow-x: hidden doesnt work in mobile view

add overflox-x: hidden to html

Why overflow-x:hidden isn't working on my mobile view?

The <span></span> tags are making problem in section with id="home". Secondly, in your CSS you have assigned the width as 120% on class .welcome_text span, change it to 100% and you are all set.

Hidden overflow showing in mobile browser but not in Desktop Browser

Try adding this:

 #main_body {
    overflow-x: hidden;
    }

Overflow-X:Hidden Doesn't Prevent Content from Overflowing in Mobile Browsers