One Missing CSS Line Cut Our Blog In Half

A screenshot arrived of this blog on a phone. Sentences were cut off mid-word at the right edge. The menu button was sliced in half. The page was not scrollable sideways, so there was no way to reach the missing text at all.

Every other page on the site was fine. The cause was one line of CSS that the blog pages did not have.

What border-box actually changes

By default, width in CSS describes the content box. Padding and border are added on top. So this:

header {
  width: 100%;
  padding: 15px 40px;
}

is not 100% wide. It is 100% plus 80px. On a 393px phone that header is 473px wide, and the 80px that does not fit hangs off the right-hand edge, taking the menu button with it.

The article container had the same shape — full width plus its own horizontal padding — so every paragraph inside it was laid out wider than the screen too. The text was not missing. It was positioned somewhere you could not see.

One declaration fixes the whole class of problem:

*,
*::before,
*::after { box-sizing: border-box; }

Now padding counts inside the width. 100% means 100%.

The line that hid it

The reason this was hard to spot is the second half of the story. The page also had this:

html { overflow-x: hidden; }

That line is usually added to stop a page sliding sideways when something overflows. It works. But it does not fix the overflow, it hides the evidence of it.

Without it, the page would have scrolled horizontally, which is annoying and instantly recognisable as a layout bug. With it, the content is simply clipped. No scrollbar, no jitter, no symptom other than text that stops early. It reads as a font problem, or a spacing problem, or a mysteriously bad design.

We spent a while looking at media queries and typography because the page genuinely looked styled. It was styled. It was 80px too wide.

How to check in ten seconds

Temporarily comment out the overflow-x: hidden and load the page on a narrow screen. If it now scrolls sideways, you have an overflow, and hiding it was never the fix.

To find the culprit, in the browser console:

document.querySelectorAll("*").forEach((el) => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth) {
    console.log(el);
  }
});

Anything that logs is sticking out past the edge. In our case it was the header and the article shell, both for the same reason.

The part worth remembering

Two habits combined to make a one-line bug invisible. Not setting border-box created the overflow. Setting overflow-x: hidden removed the only clue that it existed.

Neither is unusual. overflow-x: hidden gets pasted into a lot of stylesheets as a general-purpose cure for pages that wobble sideways on mobile. It is worth being clear with yourself about what it does: it is a mute button, not a fix. If you reach for it, find out what was overflowing first, because you are about to make it much harder to find later.

And if one page on your site looks wrong on a phone while the others look right, compare their resets before you compare anything else.