Responsive Design

beginner16 min readLesson 24 of 143

Mobile-first CSS with media queries: one page that works from a 375px phone to a wide desktop — and why mobile comes first.

More than half of web visits are phones. A site that only works at desktop width is a broken site. Responsive design is not a feature — it is the baseline.

The viewport meta tag

Before any CSS: responsive pages need this in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Without it, phones pretend to be ~980px wide and zoom out — your beautiful flexbox renders as a tiny desktop page. This tag says "the device width is the viewport".

Mobile-first

Write the phone layout with no media query at all, then add queries for bigger screens:

/* base = mobile */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* tablet and up */
@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* desktop and up */
@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

Why mobile-first? Two reasons. Technically, min-width queries layer additions cleanly — each level only overrides what changes. Practically, designing for the smallest screen forces priority: what matters most? A desktop-first page tries to shrink a mansion into a studio.

Standard breakpoints (conventions, not laws): ~640px (phone → tablet), ~768px (large tablet), ~1024px (desktop), ~1280px (wide). Pick few breakpoints and reuse them.

What flexes and grids give you for free

You have already learned responsive tools:

1fr tracks, flex: 1, and percentages scale with the screen.
flex-wrap: wrap reflows a toolbar when items no longer fit.
rem sizing respects user font settings at every width.
max-width: 100% on images stops any image from overflowing its container:

img {
  max-width: 100%;
  height: auto;
}

Media queries are the trim; fluid layout is the fabric. A page built on fr units and wrapping flex needs fewer queries than you expect.

The responsive navigation pattern

The honest beginner pattern — no JavaScript needed:

.nav ul {
  display: flex;
  flex-direction: column; /* stacked on phones */
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .nav ul {
    flex-direction: row; /* in a row on bigger screens */
    justify-content: space-between;
  }
}

(Hamburger menus require JS and a11y care — Module 4 gives you the tools; you will build one in the final project.)

What you learned

The viewport meta tag is a prerequisite, not an option
Mobile-first: base styles for phones, @media (min-width: …) to enhance upward
Fluid units (fr, %, rem, max-width: 100%) do most of the work; queries trim
Column-to-row nav flips: the beginner pattern that ships

Next: transitions — motion, and its accessibility bill.

Now practice

Responsive Design — PracticeHands-on practice for “Responsive Design”: apply what you just learned in css-responsive.2 challenges · · ~10 min