Streaming live at 10am (PST)

Horizontal Overflow Scrolling


#1

Hey there,

I’m having an issue with horizontal overflow on my site. This is the first instance I’m having of it and I’ve built out several other sites using the custom container and body structure before.

Here is a link to the site, any insight would be appreciated! It’s worth noting that the section titled “technical components” on the landing page is the only section that doesn’t shift. It’s set to display:block, but changing the others to the same didn’t help.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

https://preview.webflow.com/preview/dragonglass-eaa6cd?utm_source=dragonglass-eaa6cd&preview=2867d0e2926a1bce4f45d2e2f6ed3e2e


#2

That link is not working mate


#3

[https://preview.webflow.com/preview/dragonglass-eaa6cd?utm_source=dragonglass-eaa6cd&preview=826717c9bb93b57028e2f9ac19c0f5e9]


#4

Hi @zachstevens , I think I was able to narrow this overflow down to the fact that there is an interaction set to fade in some icons in the Components section to scale those from 1.1 to scale to origin on page scroll.

This scaling causes whitespace when the icons that are not visible are set to 1.1 scale and are not set to display none (they are invisible, but still take up space and affect other elements spacing).

I would either remove the legacy icon fade in and icon fade in delay interactions and redo those using IX 2 interactions – or – update the legacy interactions to have an initial appearance of Display None, with a scroll into view first step of Display block and a scroll out of view with a step of Display none added, so that the icons are set to display none until the point the scroll into view triggers the elements, this will prevent page overflow.

I have made a quick video that I hope helps: https://cl.ly/c04bb46999f9