Responsive Design & Media Queries — HTML & CSS Course

What you'll learn

Your visitors are on phones, tablets, laptops, and huge monitors. Responsive designmeans one site that looks great on all of them. The technique is straightforward — build for mobile first, then adapt for bigger screens with media queries.

By the end you'll be able to:

Explain responsive, mobile-first design
Use the viewport meta tag correctly
Write media queries with breakpoints
Build fluid layouts and responsive images

Mobile-first thinking

Mobile-first means you write your base CSS for small screens, then addcomplexity for larger ones. It's the recommended approach because mobile layouts are simpler (usually a single column), so you start simple and progressively enhance — rather than trying to cram a desktop design down onto a phone.

Key idea

Mobile-first pairs with min-width media queries: the base styles apply everywhere, and each query adds rules as the screen gets wider. This tends to produce cleaner, less repetitive CSS than starting at desktop and overriding downward.

The viewport tag

Responsive CSS only works if the browser is told to use the device's real width. That's the job of the viewport meta tag you've had in your boilerplate since Module 2 — without it, phones pretend to be desktop-width and zoom out, breaking your media queries:

head.html

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

Media queries

A media query applies CSS only when a condition is met — most commonly a minimum screen width. The width at which your layout changes is called a breakpoint. Here a grid goes from one column on mobile, to two on tablets, to three on desktops:

responsive.css

/* Mobile-first: base styles are for small screens */
.grid {
  display: grid;
  gap: 16px;
}

/* Tablet and up — add columns */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

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

Tip

Don't chase specific devices with exact pixel breakpoints. Instead, add a breakpoint wherever your design starts to look cramped or too stretched. Common starting points are around 640px, 768px, and 1024px, but let the content decide. You can preview all sizes with your browser's responsive/device toolbar.

Fluid layouts & images

Media queries handle the big jumps; fluid techniques handle everything in between. Use relative units (%, fr, rem), cap width with max-width, and lean on the auto-fit grid from the last module. And one rule belongs in every project so images never overflow their container:

images.css

img {
  max-width: 100%;   /* never overflow its container */
  height: auto;      /* keep the aspect ratio */
}

Note

For fluid typography, clamp() (next module) lets font size scale smoothly between a minimum and maximum with no media queries at all — for example font-size: clamp(1.5rem, 5vw, 3rem).

Recap & quick check

Key takeaways

Responsive design makes one site adapt to every screen size.
Mobile-first: write base styles for small screens, then add rules with min-width media queries.
The viewport meta tag is required for responsive CSS to work on phones.
Add breakpoints where the design needs them, not at fixed device sizes.
Use fluid units and max-width, and set img { max-width: 100%; height: auto; }.

Quick check

1. What does 'mobile-first' mean?

2. Why is the viewport meta tag necessary?

3. What is a breakpoint?

4. Which media query targets tablets and larger (mobile-first)?

5. Which rule stops images overflowing their container?

That completes Phase 4 — you can build layouts that work on any device! Next, Phase 5 adds motion and modern power, starting with transitions and animations.