CODEWITHSUNDEEP
cssmobile-website
Sylph
Sylph

Reputation: 1495

disable horizontal scroll on mobile web

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?

Upvotes: 100

Views: 191450

Answers (15)

9uifranco
9uifranco

Reputation: 391

If you're facing an issue with just a bit of horizontal scroll in your page and have tested everything (tags and styles) and didn't find a solution, try to change <meta name="viewport" content="width=device-width, initial-scale=1"> to <meta name="viewport" content="width=device-width, initial-scale=1.0">.

I don't know exactly why but using 1.0 prevents unintended horizontal overflow and scrolling on smaller screens.

Upvotes: 0

Sultan Ahmed
Sultan Ahmed

Reputation: 31

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

Upvotes: 3

Franco
Franco

Reputation: 862

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

Upvotes: 1

Usman Amin
Usman Amin

Reputation: 9

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

Upvotes: 0

Terry Riegel
Terry Riegel

Reputation: 179

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.

Upvotes: 0

Salman Abir
Salman Abir

Reputation: 182

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

Upvotes: 13

Ranjith v
Ranjith v

Reputation: 1062

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

Upvotes: 2

Ms Designer
Ms Designer

Reputation: 263

Just apply width:100%; to body

Upvotes: 0

Klaas van der Weij
Klaas van der Weij

Reputation: 1114

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

Upvotes: 60

pollux1er
pollux1er

Reputation: 5929

Simply add this CSS:

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

Upvotes: 164

Ronnie Smith
Ronnie Smith

Reputation: 18585

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

Upvotes: 7

StarflameDia
StarflameDia

Reputation: 61

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.

Upvotes: -1

Michael Spiss
Michael Spiss

Reputation: 1369

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

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

Upvotes: 3

samael
samael

Reputation: 2178

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

Upvotes: 4

James Lawruk
James Lawruk

Reputation: 31383

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

Upvotes: 12

Related Questions