Responsive design and media queries

What you will build

Start with small screens and add breakpoints only where the content needs them.

Understand the idea first

Responsive design covers type, spacing, targets, and priorities.

Build it step by step

.page {
  padding-inline: 1rem;
}
.hero {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .page {
    padding-inline: 2rem;
  }
  .hero {
    grid-template-columns: 1.3fr 0.7fr;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }
}

1. Make base styles work at 320px.
2. Widen gradually and choose breakpoints from content strain.
3. Turn the hero into two columns at the first breakpoint.
4. Test the reduced-motion preference.

Read the important lines

• Responsive design covers type, spacing, targets, and priorities.
• Relative units preserve user scaling.
• Add a breakpoint only when the layout needs it.

Common mistakes and what to check

Practice without copying

Complete a 320/768/1280 checklist for navigation, hero, cards, table, and form.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases