Fix unwanted horizontal scroll and whitespace with Overflow: hidden - Webflow tutorial
ฝัง
- เผยแพร่เมื่อ 27 พ.ค. 2021
- 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.webflow.com/lesson...
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/community
webflow.com
/ webflow
/ webflow
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Hilarious and educational as always. Please never change the style of these videos
You guys are amazing bro, couldn't find this problem on the internet anywhere in detail. You guys saved my webpage, preciate it.
Thanks for going so in depth, especially with the interactions. Helped tremendously.
Wow, Awesome never change the style of these videos pleaseeeee
Thanks, overflow was one of the most confusing thing for me like Flexbox and Grids, now I understand these concepts very well except Flexbox
X-ray mode has saved me soooooo many hours when hunting for a rogue element that's causing side scroll 🙌
yea when I discovered it I was on the moon
What do you mean by that? What x-ray are you guys talking about?
@@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.
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.
Awesome explanation and visual on this video, thanks lot!!
This tutorial can save lifes
I LOVE YOU I TRIED FOR 2 HOURS STRAIGHT AND DIDN'T FIND THE SOLUTION THANK YOU!!!!!
Thank you vey much, your knowledge helped me to solve a problem i had since two days
Thank you, it works.
Webflow tutorials always make me laugh 😁
Thanks so much for this. It really made my day ♥️♥️♥️♥️
Like like like like!!!! Finally i found the solution after days and days of suffering lol! Thank the great team!
i lost it when he rubbed the trackpad
I rarely laugh when viewing tutorials but I'm with you on this one - the smoke was hilarious
Thanks for your help. You've made my day.👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Glad we could help 😁
Thenk you so much l was loking for the solotion in along time
this video saved me ty
Thank you very much.
A much appreciated video. I have experienced this problem on mobile. Smoking track pad made my day! thanks!
Thanks!
you saved my life :D
I love these videos more than I will ever publicly admit
Thanks
Thanks' a loooooooooot😘😘😘
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 😎
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
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.
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).
@@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!
Which edit site it is ? Browser?
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?
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
Grimur, your mac is on FIRE. lol
❤❤❤❤❤
All the wrapper talk and the scrolling action like turntables. Total rapper and DJ joker opp
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.
I was using (for example) width: 50vh instead percentages...always use percentages, that's my solution
I try this, it's working but the when i scroll the website it was stucking not working smoothly like before 😖
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 )
okay how to disable vertical scroll??
If you want to disable the vertical scroll of a whole page, you can set an overflow of hidden to the BODY element.
First like 👍🏽 & comment ❤️
just do:
html, body {
max-width: 100%;
overflow-x: hidden;
It worked..Thanks
@@nikhilchoukikar3404 No problem
@@9ubgy90bohbhhyuiyug9y
where do you put this ?
on each page?
Because when i insert this i see the code in the corner of the page
@@pmjanoscosta place in Custom code then in Head Code.
Add code at the end of the tag
oh thank u so much........it works for me
I dont understand why they dont just let you do overflow-x hidden
I go mad by over flow.