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?

It seems like the banner image makes the whole site needs to have horizontal scroll for certain phones. Anyway to make the banner image to auto resize? — Sylph, Nov 16 '10 at 09:13

score 144 · Answer 1 · edited Nov 25 '18 at 17:16

144

Simply add this CSS:

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

edited Nov 25 '18 at 17:16

KyleMit

30,350
66
462
664

answered Apr 03 '16 at 00:50

pollux1er

5,372
5
37
36

6

This one is the only one that worked for me! Thanks! – ayunami2000 Oct 04 '17 at 20:58
3

Yes best answer, put it into your media query to avoid overflow on mobile devices, in addition of the media viewport of course. – Vincent Decaux Oct 24 '17 at 09:19
This resolves most of the main issues with the new reality. As what I was facing on my layout was that it would scew scroll in odd position far away from the view. This now forces the scroll x to be in frame always. Not blocking zoom in but atleast providing okay ux from it. – Mark Odey Sep 09 '18 at 17:22
1

This should be marked as the correct answer. Thanks for sharing @KyleMit – Julius Depulla Nov 23 '19 at 23:46
@JuliusDepulla, point of clarity - I just made an edit; /u/pollux1er was the one to post it originally. Maybe /u/slyph can accept one after all these years; in the meantime, I'll bounty up a bit – KyleMit Nov 25 '19 at 13:56
Having position relative for `body` made display bugs for me, overflow on body and html worked fine tho – Simon Mo Feb 02 '20 at 11:32
This is the best solution. There are times when you want to scroll on x so add those as needed. For example: h1,h2,h3,h4,h5,h6 {overflow-x:auto;} – Terry Riegel Oct 29 '21 at 13:37
This does not work if you require position sticky on child elements. – ToddPadwick Jun 28 '22 at 14:16
Not a very good answer. In desktop in now displays 2 scroll bars which is unaceptable. – Franco Aug 26 '22 at 06:40

Klaas van der Weij · Answer 2 · 2019-10-08T09:17:53.023

57

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

edited Oct 08 '19 at 09:17

answered Jun 07 '13 at 10:06

Klaas van der Weij

1,065
10
13

2

If your making an app and view it through a webview, its helpful to add this just to stop it scrolling left to right. overflow-x: hidden; – Mikeys4u Mar 16 '17 at 22:45
1

I would add to test thoroughly. In some instances, using `overflow: hidden;` will lock your page at the top, with no ability to scroll down. As Mikeys4u relates, it's usually better to use `overflow-x: hidden;`. – karolus Feb 16 '18 at 03:28
I had to apply the CSS to the `html` element also for it to work, and I didn't need the `meta` tags. – Donald Duck Oct 26 '18 at 15:27
This code still shows the horizontal scroll bar in my angualar app. – Franco Aug 26 '22 at 06:43

James Lawruk · Answer 3 · 2011-05-02T19:13:09.080

12

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

edited May 02 '11 at 19:13

answered Mar 18 '11 at 17:39

James Lawruk

30,112
19
130
137

Best answer because it works and let sticky-position works too ! – nonozor Apr 30 '21 at 15:17
1

Not a good idea if you want to keep your website accessible for everyone. Read: https://adrianroselli.com/2015/10/dont-disable-zoom.html – Kasper Kamperman Aug 08 '22 at 11:49

score 12 · Answer 4 · answered Dec 01 '19 at 05:41

12

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

answered Dec 01 '19 at 05:41

Salman Abir

183
3
9

score 6 · Answer 5 · answered Jul 13 '18 at 05:00

6

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

answered Jul 13 '18 at 05:00

Ronnie Royston

16,778
6
77
91

Some of the other solutions here do not work for me. This works for me. However, I have to replace all the
elements with
elements to prevent the mobile browsers from prompting the "Show Simplified View" dialog.
– Chong Lip Phang Nov 21 '21 at 07:34

score 4 · Answer 6 · edited May 23 '17 at 12:34

4

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

edited May 23 '17 at 12:34

Community

1
1

answered Jun 06 '13 at 08:45

samael

2,007
1
16
34

Michael Spiss · Answer 7 · 2014-06-28T11:08:31.867

3

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

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

edited Jun 28 '14 at 11:08

answered Jun 28 '14 at 11:02

Michael Spiss

1,249
1
10
7

score 2 · Answer 8 · answered Nov 27 '19 at 05:22

2

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

answered Nov 27 '19 at 05:22

Ranjith v

1,032
5
15

Perfect Thats Solve My Problem – Danyial Shahid Ali Apr 09 '21 at 07:22

score 1 · Answer 9 · edited Oct 31 '22 at 00:09

1

In this case edit your meta viewport

Try this code below:

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

edited Oct 31 '22 at 00:09

Henry Ecker

34,399
18
41
57

answered Aug 09 '22 at 20:13

Sultan Ahmed

11
3

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 13 '22 at 09:24

score 1 · Answer 10 · answered Aug 26 '22 at 06:46

This is the code that worked perfectly in my Angular app that didn't show 2 vertical srollbars in desktop mode and didn't show the horizontal scollbar in mobile mode which was a result of trying the two top voted answers.

html,
body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

score 0 · Answer 11 · answered Nov 27 '19 at 05:14

0

Just apply width:100%; to body

answered Nov 27 '19 at 05:14

Ms Designer

263
1
2
11

score 0 · Answer 12 · answered Apr 18 '20 at 12:22

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.

score 0 · Answer 13 · answered Dec 01 '21 at 15:38

0

For my project leaving everthing as is and only adding this worked:html{ overflow-x: hidden;} (Problem was in android 8 phones browsers)

answered Dec 01 '21 at 15:38

Usman Amin

11
1
4

score -1 · Answer 14 · answered Jun 17 '16 at 18:28

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.

disable horizontal scroll on mobile web

14 Answers14

Linked