Responsive design with media queries

Some layout decisions cannot be expressed as auto-fit. A sidebar that collapses on mobile. A font size that needs to scale. A hero image that swaps art direction between landscape and portrait. Media queries are the explicit opt-in for those decisions.

Write mobile-first. Start with the single-column, stacked layout that works on a phone, then use min-width media queries to add complexity as the screen gets wider. This is easier to reason about than the other way around, because you add features instead of removing them.

style.css

css

.container {
  padding: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Mobile-first layout with two widening breakpoints.

Quiz: Quiz

Loading practice…