disable horizontal scroll on mobile web

Question

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

User · Answer

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

User · Answer

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   lt meta name  viewport  content  user-scalable no  width device-width  initial-scale 1 0    gt   lt meta name  apple-mobile-web-app-capable  content  yes    gt    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

User · Answer

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

User · Answer

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

User · Answer

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    lt meta name  viewport  content  user-scalable 0    gt

User · Answer

Just apply width 100   to body

User · Answer

I had the same issue  Adding maximum-scale 1 fixed it   OLD   lt meta name  viewport  content  width device-width  initial-scale 1  user-scalable no  gt   NEW   lt meta name  viewport  content  width device-width  initial-scale 1  maximum-scale 1  user-scalable no  gt   P S  Also I have been using commas between values  But it seems to work with semi-colon as well

User · Answer

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

User · Answer

I use this to make the user still able to zoom in and out    lt meta name  viewport  content  width device-width     gt

User · Answer

This works for me across all mobile devices in both portrait and landscape modes    lt meta name  viewport  content  width device-width  initial-scale   0 86  maximum-scale 3 0  minimum-scale 0 86  gt

User · Answer

Simply add this CSS   html  body     overflow-x  hidden    body     position  relative

[css] disable horizontal scroll on mobile web

Examples related to css

Examples related to mobile-website