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
Learn more at: university.web...
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/co...
webflow.com
/ webflow
/ webflow

[@Webflow]

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

[@grantboufford5186]

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

[@thegalhorowitz]

yea when I discovered it I was on the moon

[@Rybus1]

What do you mean by that? What x-ray are you guys talking about?

[@grantboufford5186]

@@Rybus1 you can open the canvas settings by clicking on the viewport size at the top middle when in the designer. Then you’ll find a way to toggle X-ray mode! It turns everything grayscale and will reveal spacing when you hover on an element.

[@codedion]

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

[@NoahBTryhard]

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

[@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.

[@thabianblondon1231]

This tutorial can save lifes

[@GHL-University]

i lost it when he rubbed the trackpad

[@olehansen6568]

I rarely laugh when viewing tutorials but I'm with you on this one - the smoke was hilarious

[@Dariusarvinte]

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

[@infinitedesigns_io]

I love these videos more than I will ever publicly admit

[@Mohd_Musheer]

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

[@AndresGutierrez-sz2oc]

Wow, Awesome never change the style of these videos pleaseeeee

[@abirahmed1292]

Thanks, overflow was one of the most confusing thing for me like Flexbox and Grids, now I understand these concepts very well except Flexbox

[@ManishBhusal]

Thank you, it works.

[@TresnaSahabakti]

Webflow tutorials always make me laugh 😁

[@jpg317]

Thanks for going so in depth, especially with the interactions. Helped tremendously.

[@griffithjoe1]

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

[@lothionlee3020]

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

[@Webflow]

Glad we could help 😁

[@davidoluremi7178]

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

[@MePaulhenri]

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

[@vietvohoang459]

Awesome explanation and visual on this video, thanks lot!!

[@georgy.design]

McGuire, Grimur - you’re fantastic and fabulous. Yeah, that’s right - freaking fabulous because your explanations are stunning and visuals are astonishing. Yep, just a bunch of adjectives compiled together. So what? Webflow is a designer’s dream compilation 😎

[@kingawm892]

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

[@BlitzBrickz]

this video saved me ty

[@h0ph1p13]

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.

[@dawidp8805]

I've been working on a personal project the last couple of days and I had several sections in it, all with their widths set to 100vw and 'overflow:hidden'. I kept getting the unwanted horizontal scroll after publishing (both Chrome desktop and Firefox desktop) . There were no overlapping elements like animated text flying in etc. Setting the sections' widths to 'auto' seems to have fixed it. I'm not sure what happened here.

[@Webflow]

Hi Dawid! Great question and thank you so much for letting us know. 100% or Auto would be our recommended widths for section elements. The reason being that 100VW does not account for scrollbar widths (often resulting in ~50px of horizontal scrolling in different browsers depending upon local configurations).

[@dawidp8805]

@@Webflow That explains a lot. Thanks for the tip guys. I still have a lot to learn about HTML & CSS and Webflow is helping enormously!

[@RishabKapadia]

Grimur, your mac is on FIRE. lol

[@keisawada667]

Thank you very much.

[@narciscolto3590]

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?

[@Webflow]

To help us and the community see what the issue may be, can you please post this and your project's share link to the community forums? university.webflow.com/lesson/share-your-site discourse.webflow.com

[@9ubgy90bohbhhyuiyug9y]

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

[@nikhilchoukikar3404]

It worked..Thanks

[@9ubgy90bohbhhyuiyug9y]

@@nikhilchoukikar3404 No problem

[@pmjanoscosta]

@@9ubgy90bohbhhyuiyug9y where do you put this ? on each page? Because when i insert this i see the code in the corner of the page

[@9ubgy90bohbhhyuiyug9y]

@@pmjanoscosta place in Custom code then in Head Code. Add code at the end of the tag

[@osamamaarouf7036]

oh thank u so much........it works for me

[@DarkCloud0000]

you saved my life :D

[@ecomstories]

Thanks!

[@t20sgrunt36]

All the wrapper talk and the scrolling action like turntables. Total rapper and DJ joker opp

[@istiaqsit283]

Thanks

[@dimitrinho_]

I was using (for example) width: 50vh instead percentages...always use percentages, that's my solution

[@thesdfable]

okay how to disable vertical scroll??

[@Webflow]

If you want to disable the vertical scroll of a whole page, you can set an overflow of hidden to the BODY element.

[@mytop4348]

Hey team webflow! Can you please make a video on how to do text partially placed on image in hero section means little bit of text is above the boundary of image. Can you please make a video on it? I need it

[@deepakjha1200]

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

[@Webflow]

Can you please post this issue on our community forum ( discourse.webflow.com ) . Don't forget to add your share link to the post ( university.webflow.com/lesson/share-your-project-and-invite-collaborators )

[@aleksan9841]

Which edit site it is ? Browser?

[@jmtech3608]

Thanks' a loooooooooot😘😘😘

[@trycehuffman5399]

I dont understand why they dont just let you do overflow-x hidden

[@invisiblehandofadamsmith]

[@AhmedSHassan]

First like 👍🏽 & comment ❤️

[@dextermorgan5326]

❤❤❤❤❤

[@yosefsisay4878]

I go mad by over flow.