Horizontal Scrolling Woes (but not from an extra wide element?) [solved]

[davidhbtlr (David Butler)]

I’ve seen a number of posts about unwanted horizontal scrolling on mobile — maybe it’s overflow not set to hidden, using 100vw instead of 100%, or just having a really wide element — but I think I’ve got something different going on.

When you check out the page on mobile there’s extra space and I know exactly which element is causing the problem: Phone.

Delete it and everything is fine. But making it less wide, removing the animation, or setting overflow to hidden does nothing. I’m sure I’m missing something… but what?

Any help would be greatly appreciated!

---

Here is the live link: http://hey-you.webflow.io/
Here is the read-only link: Webflow - Hey You

[mikeyevin]

Welcome to the community @davidhbtlr!

I’m actually not able to reproduce the overflow on my device (LG G7) but the issue is caused by from the way these SVGs were saved out (with a bunch of excess whitespace) and the fact that they tilt during the scroll animation:

I’d recommend saving these phone SVGs without all of the extra space as it will make them much easier to work with, although your line animation may require a bit more finesse to get lined up properly. The reason you’re hidden overflow isn’t working is because the actual SVG doesn’t overflow until you tilt it, which must ignore any overflow: hidden style.

In addition to that, the form element directly below the phone section appears to break when it gets down around 300px—although personally only focus on devices 320px and wider as that’s about the smallest size you’d realistically see with just about any user:

[davidhbtlr (David Butler)]

Ah, that makes sense! Thank you for the help — it was slowly driving me insane.

Also, really appreciate the tip on the form. This is more or less my first time out and this site still needs a lot of love : )