Scrollburglars

A scrollburglar is my cute made-up name for a common phenomenon: A webpage has an accidental horizontal scrollbar that allows you to scroll by a few pixels.

Frustratingly, there isn't a single cause for this phenonenon. They can be triggered by lots of different things. Some examples:

• An element has an explicit width that is too large to fit in the parent container.

• A replaced element (eg. a video or an image) is used without constraining its width to fit in the parent container.

• A really long word like “disestablishmentarianism” forces an element to be too wide for its parent container.

• An element is explicitly pulled outside of the parent (positioned elements with negative left/right values, elements with negative margin, etc).

When I worked at Khan Academy, we spoke a lot about cultivating a “growth mindset”. A growth mindset is the belief that our brains are elastic, that we become smarter through practice, and that failure is the fastest way to learn.

Exercise 1: Recut

An alternative solution?(info)

Several students have asked if this is an acceptable solution:

.max-w-md {
  max-width: 28rem; /* Unchanged */
  width: 100%;
}

By setting width: 100%, the image will shrink if the available space is less than 28rem. It appears to satisfy all of the conditions!

But there's a (slight) catch.

In this particular case, the image in question has an intrinsic size of 650px. We're clamping it to be 28rem wide, which (at a default font size) is equal to 448px.

But, what if we put a smaller image in? For example, suppose this new image has an intrinsic width of 300px?

In this case, we don't want to apply width: 100%, because that will stretch out the image, to fill the 448px of available space. This will make the image appear fuzzy, like a low-res image blown up to fit on a billboard.