I have a splash page that uses pictures as it's background. When it's in desktop view, everything looks great. On mobile, I have it absolutely positioned, so the logo can stay in the middle.
My code looks like: https://jsfiddle.net/joshrodgers/r548b3cm/28/
This works well, but when I view on mobile, I can still scroll over to the right. I know it's because my width is set to 1500px (I am putting it in the middle with my positioning), and I know that mobile browsers ignore overflow-x on body, but is there a way to get rid of the horizontal scroll on mobile?
I have tried to wrap test div in another div, then set that div's width to 100%, but that resizes the contents inside my test div. I'd like to just continue to use this code and prevent horizontal scrolling.
I found some resources on how to disable horizontal and vertical scrolling by just adding overflow: hidden to the body, but my page does need to scroll vertical, so this doesn't solve the problem.
I would not be opposed to use jQuery or JS to do this, just haven't discovered something that works.
My meta tag looks like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/> I have read some solutions that recommended some tweaks to this, but everything I have tried seems to preserve that horizontal scrolling.
Any ideas?
Thanks,
Josh
I added: touch-action: pan-y pinch-zoom; to my .test and now it doesn't scroll :-)
Thanks,
Josh