At the narrowest common screen width, a whole row of the layout was crammed together.<\/p>\n
The obvious fix is smaller type. We tried that three times, and each time one block got better while another got worse.<\/p>\n
We used “how many lines does it wrap to” as the metric, and it can lie in two ways.<\/p>\n
\u2460 A hidden container has zero width.<\/strong> A collapsed panel always measures as one line, which looks perfect.<\/p>\n \u2461 Clipped overflow doesn’t add lines.<\/strong> 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.<\/p>\n So the thing to measure isn’t line count. It’s the ratio of the content’s real height to the container’s height<\/strong>, and you have to measure it while the element is actually visible.<\/p>\n 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<\/strong>.<\/p>\n 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.<\/p>\n Give each block a rank, and write down what it does below a given width:<\/p>\n \u2b50 Shrinking the type makes everything worse at once. Giving way lets the things that must stay keep their quality.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" We shrank the type three times before admitting it: what the layout lacked was a rule for which parts give way, not a few pixels.<\/p>\n","protected":false},"author":1,"featured_media":1023,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[29],"tags":[],"class_list":["post-2133","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-notes-en-us"],"yoast_head":"\nThe real cause<\/h2>\n
The fix is a priority order<\/h2>\n
\n