disable horizontal scroll on mobile web
CssMobile WebsiteCss Problem Overview
I'm having an issue where horizontal scrolls appear on certain phones for my site.
I tried to put overflow-x: hidden but it's not working.
The width is auto, so that it will actually automatically resize the web to suits the screen size. All other phones are fine except when viewed in blackberry, nokia e52, and Windows mobile, the horizontal scroll will appear.
Any advice?
Css Solutions
Solution 1 - Css
Simply add this CSS:
html, body {
overflow-x: hidden;
}
body {
position: relative
}
Solution 2 - Css
I've found this answer over here on stackoverflow which works perfectly for me:
use this in style
body {
overflow-x: hidden;
width: 100%;
}
Use this in head tag
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
A slight addition of mine in case your body has padding (to prevent the device from scaling to the body content-box, and thus still adding a horizontal scrollbar):
body {
overflow-x: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Solution 3 - Css
For me, the viewport meta tag actually caused a horizontal scroll issue on the Blackberry.
I removed content="initial-scale=1.0; maximum-scale=1.0; from the viewport tag and it fixed the issue. Below is my current viewport tag:
<meta name="viewport" content="user-scalable=0;"/>
Solution 4 - Css
Try this code,overflow will help to remove scrollbar.You can use it also for any div which is scrolling.
html, body {
overflow-x: hidden;
}
body {
width:100%;
}
Solution 5 - Css
This works for me across all mobile devices in both portrait and landscape modes.
<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">
Solution 6 - Css
I know this is an old question but it's worth noting that BlackBerry doesn't support overflow-x or overflow-y.
See my post here
Solution 7 - Css
I use this to make the user still able to zoom in and out:
<meta name="viewport" content="width=device-width;" />
Solution 8 - Css
try like this
css
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-msbox-sizing: border-box;
}
body{
overflow-x: hidden;
}
img{
max-width:100%;
}
Solution 9 - Css
Just apply width:100%; to body
Solution 10 - Css
Depending on box sizing width 100% might not always be the best option. I would suggest
width:100vw;
overflow-x: scroll;
This can be applied in the context of body, html as has been suggested or you could just wrap the content that is having an issue in a div with these settings applied.
Solution 11 - Css
For my project leaving everthing as is and only adding this worked:html{ overflow-x: hidden;}
(Problem was in android 8 phones browsers)
Solution 12 - Css
I had the same issue. Adding maximum-scale=1 fixed it:
OLD: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
NEW: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
P.S. Also I have been using commas between values. But it seems to work with semi-colon as well.