On a 390px-wide phone, a whole row of the layout was crammed together.
The first fix that came to mind was smaller type. We shrank it three times. Each time, one block got better and another got worse.
Even the measurement was off
At first we judged crowding by how many lines things wrapped to. That number lies in two situations.
When a container is hidden, its width is zero. A collapsed panel always measures as one line, which looks perfect.
When overflow gets clipped, the line count doesn’t go up. Half a sentence is missing from the screen, and the numbers show nothing wrong.
We switched to measuring the ratio of the content’s actual height to the container’s height, and only after the element is really on screen.
What was actually wrong
A narrow screen rarely feels crammed because one element is too big. More often, no element is allowed to give way.
Main content, supporting copy, date and category, action buttons: each block assumes it has to be there. As the screen narrows they all narrow together, and in the end none of them is easy to read.
The fix is a priority order
We gave each block a rank and wrote down what it does once the screen gets narrower than a set width:
- Main content: always there, in full
- Supporting copy: collapses past a certain width instead of shrinking its type to squeeze in
- Date and category: merge into one line, or keep only the most important one
- Action buttons: go full width, one per row
We haven’t touched the font size since.
