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? Thank you!

Answer 1

In order to set width to device width, use the following:

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />

Answer 2

Simply add this CSS:

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

Answer 3

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;
}

Answer 4

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;"/>

Answer 5

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

Answer 6

I use this to make the user still able to zoom in and out:

<meta name="viewport" content="width=device-width;" />

Answer 7

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">

Answer 8

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.