responsive-design

Start from content constraints and component boundaries rather than device screenshots. Use fluid sizing, intrinsic layout, and container queries, adding only the fewest breakpoints justified by actual content behavior.

Test narrow, intermediate, wide, tall, short, zoomed, and long-localized-content states. Verify the hero and navigation first, then representative dense and interactive components, checking for overflow, clipped focus rings, and hidden actions.

Use container queries when a component's layout should respond to its own available space rather than the viewport, which suits reusable components placed in varied contexts. Media queries remain appropriate for page-level layout changes.

Yes, interfaces should respect reduced-motion preferences alongside keyboard, touch, coarse pointers, safe areas, and virtual keyboards. Avoid adding heavy animation or rendering dependencies unless the performance cost is explicitly approved.

Overflow typically comes from fixed-width elements, oversized images without reserved dimensions, or long unlocalized strings. Use fluid sizing, correctly sized responsive images, and test with long localized content to catch these cases.