Responsive design

Responsive design combines fluid primitives with targeted breakpoints. Start mobile-first: base styles for narrow viewports, then add min-width queries when content genuinely needs more space.

					.hero-title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
.layout {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .layout { grid-template-columns: 16rem 1fr; }
}
				

Use fluid images (`max-width: 100%`, `srcset`), flexible typography, and preference queries (hover, pointer, reduced motion). Breakpoints should follow content stress points — not device model lists.

On interviews: mobile-first ordering, content-based breakpoints, touch versus hover, and long translation strings.

Common pitfalls: viewport-only breakpoints inside reusable components; fixed heights and vw typography causing overflow.

The trade-off is fewer breakpoints (fluid first) versus explicit layout jumps when content truly reflows.

Checklist:

• Start fluid with minmax and clamp.
• Add breakpoints when content breaks, not per device.
• Respect input and motion preferences.
• Test zoom and localization.