Fix unwanted horizontal scroll and whitespace with Overflow: hidden — Webflow tutorial
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: https://university.webflow.com/lesson…
----------
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow
Content
2.82 -> Overflow issues.
3.85 -> You’re not alone.
5.16 -> These are super common.
6.43 -> Usually, this kind of thing shows up with
sort of a horizontal scroll — sometimes
10.12 -> on a desktop or laptop, and sometimes on a
mobile device.
14.12 -> And this usually happens because elements
on a page can exist outside the viewport.
19.63 -> Outside the boundary of the browser or the
device.
22.31 -> In this lesson, we're going to talk about
why this happens, we'll talk about testing
26.029 -> for it (so we can validate our designs are
configured properly), then we'll talk about
30.45 -> how to stop it from happening — now a lot
of people might jump to setting overflow:
35.59 -> hidden on the Body element itself (and we'll
talk about why that might not be the best
40.149 -> way to go).
41.149 -> Now.
42.149 -> If you haven’t gone through the Webflow
101 Crash Course, or you’re just looking
44.6 -> to brush up on a lot of these fundamentals
of layout and positioning, check that out
48.969 -> on Webflow University.
50.53 -> But for this lesson, let’s start with the
first question: why does overflow happen?
55.89 -> There are a lot of things that can cause this
but generally, it's one of two.
58.99 -> It could be layout-related (there can be an
object — an element that's sized or positioned
63.559 -> in a way that it's being pushed off the screen)
— really any layout where something's hanging
68.27 -> off the viewport.
69.33 -> That’s the first way.
70.85 -> It could also be interaction or animation-related.
73.59 -> Maybe you have a heading flying in from the
side.
76.42 -> When the page loads, the initial position
of the heading might be off the screen.
81.28 -> So, even though it ends up in the right spot,
its initial position caused the page to have
86.36 -> overflow.
87.37 -> Now.
88.37 -> There are other ways this can happen, but
layout and animation-related overflow tend
92.71 -> to show up the most often.
94.409 -> Second part: how can we detect it?
96.65 -> So there are two ways to do this: 1 — in the Webflow
Designer, and 2 — in the published project.
102.35 -> For the Designer — scroll right and left
to see if anything's overflowing outside the
106.69 -> viewport.
107.69 -> If you're using a trackpad,
just scroll right and left — but if you
111.64 -> are using a mouse wheel, you can usually hold
down shift while scrolling to scroll right
116.56 -> and left.
117.63 -> And you might not see anything right away
— that’s why it’s always important to
121.03 -> click and drag to resize the canvas — that
way we’re checking for responsiveness and
126.369 -> fluidity.
127.399 -> As for the published site, it’s also important
to really carefully consider how any interactions
132.53 -> could be messing with things.
134.48 -> If we test on mobile, if we have something
fly in from the right, a lot of times, on
138.47 -> mobile devices, this can cause the browser
to have this sort of vestigial white space
143.02 -> on the (right side of the sc…)
144.02 -> [Grimur] Vestigal what?
145.02 -> [McGuire] Vestigial.
146.02 -> It’s leftover but not needed from the original
animation.
148.4 -> Notice how even though the interaction is
done (the animation is complete), the browser
152.68 -> still thinks it needs that extra width.
155.45 -> In these examples, what exactly are we looking
for?
158.17 -> Is all horizontal scrolling a bad thing?
160.71 -> Of course not.
161.71 -> What we're looking for is anything that makes
your layout look or feel like the boundary
165.53 -> (usually the right side of your design) — anything
that makes it look and feel as if the design isn't
170.28 -> functioning the way you want it to.
172.94 -> Sometimes it's extra space, sometimes it's
elements hanging off the edge.
176.08 -> There are lots of things that could be the
culprit.
178.35 -> So, finally (third part): how do we stop it?
181.66 -> If the reason — if the culprit is something
hanging off the edge?
185.01 -> We can usually select one of its parent elements
(in this case, we can see in the Navigator
189.58 -> that this element is inside a section.)
192.26 -> All the way up in the hierarchy we can see
that it’s all inside the section.
195.88 -> We just select that section and set its overflow
to hidden.
200.41 -> That means it's going to hide things that
are overflowing (things that are hanging over
204.09 -> the section's boundary).
205.61 -> If we test that, it works exactly as we'd
expect.
209.84 -> Now.
210.84 -> We have a lot on Webflow University that covers
this, but let’s show something we see all
214.59 -> the time.
215.59 -> Someone will go in, and they’ll design a
layout using exact pixels.
220.26 -> Or for whatever reason, they’ll make their
design pixel-perfect on their exact display.
225.19 -> The problem is, different kinds of devices
have different widths (even though we’re
230.24 -> designing on the same breakpoint like desktop,
that breakpoint is actually a range of widths).
235.85 -> So when we use pixels everywhere on all these
dimensions, it might look perfect on that
241.01 -> one device you’re designing on, but on others,
it sort of falls apart.
245.02 -> Not a great user experience.
246.81 -> So we want to make sure we’re designing
responsively.
249.76 -> And this is a great way to test this.
251.97 -> If we go into Preview mode, grab the edge,
we can resize the viewport to test responsiveness
257.19 -> and fluidity on all kinds of devices.
259.93 -> And, of course, we can go back to desktop
(we can even do this while designing), and
264.93 -> we can resize the canvas to see what something
might look like on a much larger display.
270.56 -> But those are some of the ways we can consider
layout (when something’s overflowing, it
274.48 -> helps to consider how we’ve built that layout).
278.19 -> What about an interaction?
279.19 -> How do we fix that?
280.19 -> Well, we have this heading again, and even
though it ends up in the right spot, its initial
284.35 -> position is off the page (so it's causing
the page to get stuck this way).
289.63 -> Well, it's the same thing here.
291.36 -> We can select its parent element (a div block)
and set its overflow to hidden.
296.48 -> But here's the problem: it's doing what we
told it to do, but that's causing the animation
301.03 -> to get clipped.
302.32 -> Remember: setting overflow: hidden means it
hides anything handing over the elements boundary.
308.34 -> So.
309.34 -> Let's go in and remove that, and instead,
let's try setting overflow: hidden to the
314.5 -> next parent up in the hierarchy — the section
itself.
317.52 -> If we do this, the animation will still work
as expected, but now, there’s no overflow.
324.3 -> Now.
325.3 -> A lot of people might ask: why not go
all the way to the top?
329 -> What happens if we set overflow: hidden on
the body?
332.7 -> Well, let's experiment.
335.34 -> Body element: selected.
337.48 -> Overflow set to hidden.
339.47 -> Let’s go in and Publish our work and check
on Grímur?
342.72 -> [McGuire] Yeah.
343.72 -> If you want to pull that up and… refresh.
346.49 -> Scroll… vertically.
348.57 -> Yeah.
349.61 -> Setting overflow: hidden on the body can clip
the rest of the content on the page.
352.95 -> And this can stop people from being able to
successfully scroll through your page beyond
357.69 -> what's initially visible in the viewport.
359.63 -> So.
360.63 -> If you need to set overflow: hidden to an
entire page?
363.65 -> One alternative is adding a div block and
using it as a wrapper — basically putting
368.18 -> everything inside that wrapper.
370.75 -> Then (and only then), you can set overflow:
hidden to that new element (the wrapper we
375.7 -> just made).
376.99 -> But none of this is abnormal.
379.27 -> Elements can hang off the edge and animations
can start off the edge — and we can test
382.71 -> this by checking both in the Webflow Designer
and in the published page.
386.389 -> And we can remove it by selecting one of the
offending elements' parents...and making sure
390.99 -> its overflow...is set to hidden.
393.43 -> Now.
394.43 -> Like we said.
395.43 -> We have a lot of information on layout that
covers all of this in more detail.
398.46 -> And that’s available for free on Webflow
University — so check that out if you haven’t
403.84 -> already.
404.84 -> That's how to solve common overflow challenges
using overflow: hidden.
Source: https://www.youtube.com/watch?v=jZarQTqNIeg