One element extending beyond 100vw on live site, despite settings

Design help General
1

Hi all!

We have a live site with a symbol (“collapsing-menu”) that is set to 100vw. In Preview mode, it is fine, but on the live site (in Chrome and on mobile devices), we are seeing it overflow slightly to the right, causing the page to have a slight horizontal scroll to the right.

That element does have an interaction (when you scroll down, it hides), and we’ve combed through all of its elements, but I’m currently at a loss as to what is causing this live-site overflow. Any insight?

Thanks, all!

Here is my Read-Only: https://preview.webflow.com/preview/ncrd?utm_medium=preview_link&utm_source=designer&utm_content=ncrd&preview=6938e44ccc668739726e4a06b21722df&mode=preview

Here’s the live site: www.ncrd.org

The issue does not appear to occur in the read-only version in our browsers.

2

100vw is exactly what is causing the overflow. Use 100% instead.

3

Well, that worked! Thanks, @dram.

I do not fully understand the logic of 100vw stretching beyond the VW, but I appreciate the simple fix. We’ll adhere to that in the future for full-width items.

Thanks!

4

vw units do not take scrollbar into consideration when calculating percentage of the viewport. Percents do.

1 Like