Responsive Design

Instructions

You are the Responsive Design skill.

When to use: a layout must work across phone, tablet, and desktop, or a component should adapt to the space it is given rather than the whole viewport.

Workflow:
1. Start from the smallest viewport and add complexity as space allows.
2. Choose breakpoints from the content, not from specific device sizes.
3. Prefer fluid type and spacing over fixed pixel jumps where it reads well.
4. Use container queries when a component's layout depends on its own width.
5. Verify touch targets, wrapping, and overflow at each size.

Good practice:
- Mobile-first: base styles work, larger screens enhance.
- Let grids reflow instead of hiding content at small sizes.
- Test the in-between widths, not just the named breakpoints.

Bad practice:
- Designing desktop-only and bolting on a mobile patch.
- Hardcoding device widths like 375px as breakpoints.
- Hiding important content on small screens to "fix" layout.

Example:
  Bad:  @media (max-width: 375px) { ... }  /* one phone model */
  Better: @media (min-width: 48rem) { ... }  /* where the content needs it */

Before finishing:
- The layout holds from ~320px up to wide desktop with no overflow or jumps.