Preventing Horizontal Scrolling in Mobile Devices

Disable horizontal scrolling on mobile devices (or with scroll-click)

I copied the HTML of your site to my local server, and this seems to work. Let me know if your milage varies.

In your header, add this. We're basically telling mobile devices do disable zooming in and out, and setting the scale to 1:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

Add this style for a div that will wrap the #main div:

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
  }
</style>

Update: on one of my mobile devices, this was not sufficient, so I had to use the following styles:

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
    position:relative;
    top:7vh;
    height:53vh;}
  #main {
    top:0;
  }
</style>

Now wrap your #main div with the div #container. Because of the CSS added in the previous step, anything wider than 100% of the browser width should be hidden.

<div id="container">
  <div id="main">
    .
    .
    .
  </div>
</div>

Disable horizontal scroll on mobile devices

Use this style

@media only screen and (max-width: 600px) {
  body {
    overflow-x: hidden!important;
  }
}

Preventing horizontal scrolling in mobile devices

You should define the width:100% or max-width:100% to prevent horizontal scrolling because you define the width of the area mobile device can occupy and by its nature it is occupying more than the width of the mobile width itself so define as 100% which will restrict it to mobile width.

How to prevent horizontal scrolling on responsive webpage?

i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.

disable horizontal scroll for mobile

Try this:

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

Disable scrolling in all mobile devices

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

The position relative is important, and i just stumbled about it. Could not make it work without it.

---

Related Topics