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;
}
Related Topics
Css Opacity Only to Background Color, Not the Text on It
Opacity CSS Not Working in Ie8
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
How to Conditionally Apply CSS Styles in Angularjs
How to Style Icon Color, Size, and Shadow of Font Awesome Icons
Adjust List Style Image Position
Matching an Empty Input Box Using Css
How to Add Border in My Clip-Path: Polygon(); CSS Style
Browsers' Default CSS Stylesheets
Why Are CSS Named Grid Areas Not in Quotes
Google Chrome Printing Page Breaks
Justify the Last Line of a Div
Css Auto Hide Elements After 5 Seconds
Aligning Grid Items Across the Entire Row/Column (Like Flex Items Can)