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

Question

I have an element that is three times the width of the browser window (it needs to be) and I cant seem to disable the ability to scroll sideways on mobile devices.

I found a lot of threads with a similar question, in almost everyone it was suggested to add

max-width:100%; and overflow-x:hidden; 

to the body and/or html tags, which I did or adding something more or less similar to

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

(I tried nearly every variant I came upon) Neither of those solutions worked though

body
{
    max-width: 100vw;
    overflow-x: hidden;
    position: absolute;
    height: auto;
    padding: 0px;
    margin: 0px;
}

Does anybody have an idea on how to fix this? Thanks.

Answer 1

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>