Overflow issues. You’re not alone. These are super common. Usually, this kind of thing shows up with
sort of a horizontal scroll — sometimes on a desktop or laptop, and sometimes on a
mobile device. And this usually happens because elements
on a page can exist outside the viewport. Outside the boundary of the browser or the
device. In this lesson, we're going to talk about
why this happens, we'll talk about testing for it (so we can validate our designs are
configured properly), then we'll talk about how to stop it from happening — now a lot
of people might jump to setting overflow: hidden on the Body element itself (and we'll
talk about why that might not be the best way to go). Now. If you haven’t gone through the Webflow
101 Crash Course, or you’re just looking to brush up on a lot of these fundamentals
of layout and positioning, check that out on Webflow University. But for this lesson, let’s start with the
first question: why does overflow happen? There are a lot of things that can cause this
but generally, it's one of two. It could be layout-related (there can be an
object — an element that's sized or positioned in a way that it's being pushed off the screen)
— really any layout where something's hanging off the viewport. That’s the first way. It could also be interaction or animation-related. Maybe you have a heading flying in from the
side. When the page loads, the initial position
of the heading might be off the screen. So, even though it ends up in the right spot,
its initial position caused the page to have overflow. Now. There are other ways this can happen, but
layout and animation-related overflow tend to show up the most often. Second part: how can we detect it? So there are two ways to do this: 1 — in the Webflow
Designer, and 2 — in the published project. For the Designer — scroll right and left
to see if anything's overflowing outside the viewport. If you're using a trackpad,
just scroll right and left — but if you are using a mouse wheel, you can usually hold
down shift while scrolling to scroll right and left. And you might not see anything right away
— that’s why it’s always important to click and drag to resize the canvas — that
way we’re checking for responsiveness and fluidity. As for the published site, it’s also important
to really carefully consider how any interactions could be messing with things. If we test on mobile, if we have something
fly in from the right, a lot of times, on mobile devices, this can cause the browser
to have this sort of vestigial white space on the (right side of the sc…) [Grimur] Vestigal what? [McGuire] Vestigial. It’s leftover but not needed from the original
animation. Notice how even though the interaction is
done (the animation is complete), the browser still thinks it needs that extra width. In these examples, what exactly are we looking
for? Is all horizontal scrolling a bad thing? Of course not. What we're looking for is anything that makes
your layout look or feel like the boundary (usually the right side of your design) — anything
that makes it look and feel as if the design isn't functioning the way you want it to. Sometimes it's extra space, sometimes it's
elements hanging off the edge. There are lots of things that could be the
culprit. So, finally (third part): how do we stop it? If the reason — if the culprit is something
hanging off the edge? We can usually select one of its parent elements
(in this case, we can see in the Navigator that this element is inside a section.) All the way up in the hierarchy we can see
that it’s all inside the section. We just select that section and set its overflow
to hidden. That means it's going to hide things that
are overflowing (things that are hanging over the section's boundary). If we test that, it works exactly as we'd
expect. Now. We have a lot on Webflow University that covers
this, but let’s show something we see all the time. Someone will go in, and they’ll design a
layout using exact pixels. Or for whatever reason, they’ll make their
design pixel-perfect on their exact display. The problem is, different kinds of devices
have different widths (even though we’re designing on the same breakpoint like desktop,
that breakpoint is actually a range of widths). So when we use pixels everywhere on all these
dimensions, it might look perfect on that one device you’re designing on, but on others,
it sort of falls apart. Not a great user experience. So we want to make sure we’re designing
responsively. And this is a great way to test this. If we go into Preview mode, grab the edge,
we can resize the viewport to test responsiveness and fluidity on all kinds of devices. And, of course, we can go back to desktop
(we can even do this while designing), and we can resize the canvas to see what something
might look like on a much larger display. But those are some of the ways we can consider
layout (when something’s overflowing, it helps to consider how we’ve built that layout). What about an interaction? How do we fix that? Well, we have this heading again, and even
though it ends up in the right spot, its initial position is off the page (so it's causing
the page to get stuck this way). Well, it's the same thing here. We can select its parent element (a div block)
and set its overflow to hidden. But here's the problem: it's doing what we
told it to do, but that's causing the animation to get clipped. Remember: setting overflow: hidden means it
hides anything handing over the elements boundary. So. Let's go in and remove that, and instead,
let's try setting overflow: hidden to the next parent up in the hierarchy — the section
itself. If we do this, the animation will still work
as expected, but now, there’s no overflow. Now. A lot of people might ask: why not go
all the way to the top? What happens if we set overflow: hidden on
the body? Well, let's experiment. Body element: selected. Overflow set to hidden. Let’s go in and Publish our work and check
on Grímur? [McGuire] Yeah. If you want to pull that up and… refresh. Scroll… vertically. Yeah. Setting overflow: hidden on the body can clip
the rest of the content on the page. And this can stop people from being able to
successfully scroll through your page beyond what's initially visible in the viewport. So. If you need to set overflow: hidden to an
entire page? One alternative is adding a div block and
using it as a wrapper — basically putting everything inside that wrapper. Then (and only then), you can set overflow:
hidden to that new element (the wrapper we just made). But none of this is abnormal. Elements can hang off the edge and animations
can start off the edge — and we can test this by checking both in the Webflow Designer
and in the published page. And we can remove it by selecting one of the
offending elements' parents...and making sure its overflow...is set to hidden. Now. Like we said. We have a lot of information on layout that
covers all of this in more detail. And that’s available for free on Webflow
University — so check that out if you haven’t already. That's how to solve common overflow challenges
using overflow: hidden.
