At the narrowest common screen width, a whole row of the layout was crammed together.
The obvious fix is smaller type. We tried that three times, and each time one block got better while another got worse.
The measurement lies
We used “how many lines does it wrap to” as the metric, and it can lie in two ways.
① A hidden container has zero width. A collapsed panel always measures as one line, which looks perfect.
② Clipped overflow doesn’t add lines. The text runs past the edge, but the container clips it, so the count stays the same. Half a sentence is gone from the screen and the numbers look fine.
So the thing to measure isn’t line count. It’s the ratio of the content’s real height to the container’s height, and you have to measure it while the element is actually visible.
The real cause
When a narrow screen feels crammed, it’s usually not that each element is too big. It’s that no element is allowed to step aside.
Main content, supporting copy, meta, action buttons: each one assumes it has to be there. As the width shrinks, they all shrink together, and all of them end up worse.
The fix is a priority order
Give each block a rank, and write down what it does below a given width:
- Main content: always there, always complete
- Supporting copy: collapses once space runs out, rather than shrinking
- Meta: merges into one line, or keeps only the most important item
- Actions: become a full-width single column
⭐ Shrinking the type makes everything worse at once. Giving way lets the things that must stay keep their quality.
