RF-06 · Fixed cards and images
Check at 1280px / 400%, then 390px, then 320px
Fixed-width cards and images
A pixel width on a card or an image is the most ordinary way a page ends up scrolling in two directions. The card looks right on the machine it was built on and hangs off the edge everywhere else.
Look for
A card wider than the screen, an image running past the right edge, or a caption cropped because the card would not grow.
A · Expected pass
Cards share the row, images fill their card and keep their ratio.
Fluid card
The card takes a share of the row and the image fills the card. Its height follows from its ratio, so nothing is squashed.
Content height
The caption area has no fixed height, so a longer caption at a narrow width simply makes this card taller than it was.
Wraps to one
At tablet the three become two per row, and at mobile each card takes the full width on its own line.
B · Known risk
A 380 pixel card with a 720 pixel image inside it, and a fixed caption box.
The image inside this card is 720 pixels wide against a 380 pixel card, so it hangs out of the frame on both counts, and this caption box is cut to two lines.
This card is a tidy 380 pixels, which is still wider than the content area of a 320 pixel phone once the page gutters are counted.
Three of these in a row that never wraps needs about 1200 pixels, so the third is off screen on most laptops at 400% zoom.