Problem with broken mobile view on horizontal scroller

[brad.tipper]

I've been looking to create a horizontal scroller- similar to what's shown here: https://demo.wplit.com/oxygen-horizontal-scroll/

 

I have noticed that if you load that page on mobile (or in the responsive view of Chrome's dev tools, as shown in the screenshot), the layout is completely broken- ie. the full width of content is shown. I've seen this on several GSAP demos over the last week or so, so perhaps it's known? I'm not sure what the issue is, nor how to solve it. I've had a look through the forum and docs but haven't had any luck finding a fix.

 

Perhaps someone knows how to resolve this issue? TIA.

[akapowl]

Hello and welcome to the forums @brad.tipper

 

Yes, that has come up a couple of times alreads. It is the viewport adjusting to the overflowing content.

 

Try setting overflow-x: hidden on the body and your (what it looks to be) horizontal section.

 

If that doesn't work, maybe you will have to add another wrapper inside that section and set overflow-x: hidden to that wrapper.

 

And if that still doesn't resolve things, please create a minimal demo, so we can take a closer look.

 

I hope one of the above will help, though. 

 

Edit:

Here are some recent threads on that topic

 

 

 

 

[brad.tipper]

Much appreciated @akapowl, adding overflow-x: hidden on the horizontal section fixed it for me. Thanks for your help!