Fix unwanted horizontal scroll and whitespace with Overflow: hidden — Webflow tutorial

Sometimes elements on a page can exist outside the viewport, and an unintended side effect can be horizontal or sideways scrolling that shows extra whitespace around your design. Not all horizontal scrolling is a bad thing, but if it’s something that doesn’t work with your design, we’ll walk you through how to stop it using Overflow: hidden, responsive design, and mindful interaction setup.

0:22 — Introduction
0:50 — Why does overflow happen?
1:35 — Detect overflow
3:00 — Fix overflow
5:31 — Check on Grimur
6:17 — Recap

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[sanwar.studio]

love you broooo

you save my mind to explode`

[Yoshe_kacar]

I just watched 1 minute of this video and the answer was there, thank you. very educative and good.

[Mohd_Musheer]

Like like like like!!!! Finally i found the solution after days and days of suffering lol! Thank the great team!

[davidoluremi]

Thanks so much for this. It really made my day ♥️♥️♥️♥️

[kingawm]

Thenk you so much l was loking for the solotion in along time

[Dariusarvinte]

I LOVE YOU I TRIED FOR 2 HOURS STRAIGHT AND DIDN'T FIND THE SOLUTION THANK

[the-iries]

Thank you to Webflow, but I encountered an issue with a section (it was empty during testing): overflow-hidden, + I tested it with different widths settings: 100% width, then 100vw, and finally auto width, but nothing worked - no interactions. Then I placed this code in the Footer Code (website settings), and it worked like magic:
<style>
body, html {
overflow-x: hidden;
}
</style>

It can save time for somebody.

[lothionlee]

Thanks for your help. You've made my day.👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

[AhyariNet]

Thank you for your explanation, especially the overflow caused by the animation. I searched for days for the cause, apparently it was because there was a fade-right animation which caused the overflow to occur.

[grantbouff]

X-ray mode has saved me many hours when hunting for a rogue element that's causing side scroll 🙌

[MePaulhenri]

Thank you vey much, your knowledge helped me to solve a problem i had since two days

[ubgybohbhhyuiyugy]

just do:

html, body {
max-width: 100%;
overflow-x: hidden;

[deepakjha]

I try this, it's working but the when i scroll the website it was stucking not working smoothly like before 😖

[NoahBTryhard]

You guys are amazing bro, couldn't find this problem on the internet anywhere in detail. You guys saved my webpage, preciate it.

[AndresGutierrez-szoc]

Wow, Awesome never change the style of these videos

[hphp]

My "stupid" solution is to remove high-level HTML elements (closer to the BODY tag) from the template. Remove them 1 by 1. (Reminder to backup your project first so you don't fck it up)

So basically:
1. remove header
refresh page, see if it still scrolls sideways - if yes, then it's probably NOT the header causingthe problem
2. remove the next element, say carousel ...
see if it still scrolls sideways...
3..
etc.
( note: there is a rare case where you might have screwed up in more than one place. Try removing the whole html from the body and introduce elements 1 by 1 )

when you find the high-level element that causes problems, split it into parts and start removing/reintroducing parts 1 by 1.

[griffithjoe]

A much appreciated video. I have experienced this problem on mobile. Smoking track pad made my day! thanks!

[narciscolto]

Got a problem, I did everything you guys said, I even wrapped everything in on div block and set its overflow to hideen, and there were still a horizontal scrollbar. The thing is that i have an interaction, a fixed navbar that changes its element and background color when scrolled out of view (the view being an absolute div with 100vw) and with 100% offset, I tried almost everything and I am stuck now, any tips?

[Cardion]

Hilarious and educational as always. Please never change the style of these videos