Test & fix

Your site looks right on the machine you built it on. That's the one device where it was guaranteed to look right — you adjusted it until it did.

Real visitors arrive on phones, tablets, old laptops, huge monitors, and browsers you've never opened.

This is edge-case testing from Chapter 6, applied to appearance. The normal case already works. Go hunting for the unusual ones.

A phone screen is roughly 400 pixels wide. A laptop is around 1400.

So a flex row of three cards that looks elegant on your laptop gets squashed into three unreadable slivers on a phone.

The fix is one line:

.row {
  flex-wrap: wrap;
}

That tells the row: if there isn't room, let items drop onto the next line instead of squashing. Cards sit side by side on a wide screen and stack neatly on a narrow one — with no second layout to maintain.