# Responsive CSS Checklist

Run this before calling a layout responsive.

- Start with the smallest useful layout as the default CSS.
- Add `min-width` media queries only when the content needs more layout.
- Use content-driven breakpoints, not device names.
- Test long words, long labels and short content.
- Check `min-width: 0` in flex and grid children that need to shrink.
- Use fluid sizing with `min()`, `max()`, `clamp()` or flexible grid tracks where useful.
- Use responsive images correctly: HTML handles `srcset`, `sizes` and `picture`; CSS handles presentation.
- Check touch targets, especially icon buttons and dense navigation.
- Test at 200 percent browser zoom.
- Test at least one narrow, one medium and one wide viewport.
- Confirm the source order still makes sense when the layout changes.

Responsive CSS is finished when real content survives real constraints.