Overflow hidden not working on this project

Design help General
1

Hi, I have a project that uses IX2 to animate both the truck, boxes and contact form whilst scrolling down or up the page.

When you scroll down the page, the animation on the boxes that forces it off canvas to the right also causes the whole page to have that ugly off canvas white space if using a magic mouse to scroll left and right, or on touch screens.

I have tried applying overflow hidden to the parent section but it does not stop the overflow at all. Is this a known bug with IX2 off canvas animations or am I missing something simple?

You can see the problem on the live site…

Here is my site Read-Only: https://preview.webflow.com/preview/umgid?preview=05caabdb182cc002abbaa70a29f06de8

2 Likes
2

Hi @Golden28

The parent container (the section) needs to have setting of relative for it to work I think.

If you put this code into your footer in the site settings, it will eliminate all overflow issues throughout the site without changing anything.

<style> body { overflow-x: hidden !important; } </style>

Let me know if that works :smiley:

6 Likes
3

Wonderful Mark,

I tried the relative fix first and it did indeed work but threw out a little bit of my styling.

I then tried the code fix and bingo! Styling preserved and issue fixed.

Truly grateful.

1 Like
4

Glad it worked. :+1:
Anytime you want to style with absolute or relative, adding relative to the parent is a good habit to get into, it can save a bit of time later on sometimes.

5

Noted, thank-you very much!

6

Thanks a lot Mark, works great. I’m just having issues in mobile. It worked perfectly in desktop but seems like mobile still has that odd horizontal scroll.