Disable horizontal scrolling on mobile safari, overflow-x: hidden fault site

Question

I am looking to prevent horizontal scrolling on my portfolio in mobile safari. The design has content div that is off the screen until the user clicks on a menu item and then goes to the screen. This works fine on the desktop, but on the mobile device it leaves a ton of extra space that the user can scroll horizontally.

website http://www.robiannone.com

I used this tag viewport <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

and I tried using overflow-x:hidden with a media query with no luck. When I add overflow-x: hidden in the html or body tag, nothing happens, however, when I add it to both the html tag and the body of the site, it splits into sections and places the scroll bar next to the header. I was looking for other solutions, but so far have not come up with anything to help. Would it just not work because I intentionally post content from the screen?

Thanks so much for any help you can provide!

Here is the css for the div content:

 .web { width: 953px; height: 150px; position: absolute; margin-top:40px; margin-left:0px; z-index:1;opacity:0; padding:7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; /*Transition Effect, Thanks css-tricks.com! */ -webkit-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; -moz-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; -o-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; -ms-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; } .video { width: 953px; height: 150px; position: absolute; margin-top:40px; margin-left:0px; z-index:500; overflow:hidden; opacity:0; padding:7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; /*Transition Effect, Thanks css-tricks.com! */ -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease; -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease; -o-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease; -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease; transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease; } .about { width: 953px; height: auto !important; position: absolute; margin-top:40px; z-index:9000; opacity:0; padding:7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border-radius: 10px; /*Transition Effect, Thanks css-tricks.com! */ -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; -o-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease; /*Classes that Div take once clicked*/ .prime{ width: 953px; height: 750px; background:rgba(255,255,255,.9); margin-left:0px; position: absolute; margin-top:75px; z-index:9001; opacity:1; overflow:auto; } .third{ width: 953px; height: 200px; opacity: 0.0 !important; position: absolute; margin-top:-499px; margin-left:1810px; z-index:1; overflow:hidden; } .secondary{ width: 953px; height: 200px; opacity: 0 !important; position: absolute; margin-top:499px; margin-left:-1810px; z-index:500; overflow:hidden; } 

Answer 1

I just solved a similar problem using a media query to set an overflow: a hidden element when it is loaded on a small screen.

So, in my css:

• overflow: displayed on my div with all content pending slide
• overflow-x: hidden in the html tag to get rid of the third-party path scroller, which is created due to the width of the content
• media request for setting overflow: hidden in the content div if the screen is small

I understood from the point of view of the user that when the screen was larger than 1024 pixels, they would benefit from the additional visual impact that the content would be ready to slide onto the screen on both sides, but when viewing a site 960 pixels wide by 1024 pixels or less the impact will be lost as the content is largely invisible in any case.

 html { overflow-x:hidden; } @media only screen and (max-width: 1024px) { overflowing_content_div { overflow:hidden; } } 

there may be a less hacky solution for this, which will be promising enough to cope with mobile devices with a higher screen resolution than 1024 pixels, if I would like to hear it and would prefer it to be voted for the main answer