CSS Responsive Design Guide: Media Queries & Mobile-First Layout
Learn CSS responsive design with media queries, mobile-first strategy, fluid typography, responsive images, and common breakpoints. Build a page that works on any screen size.
A webpage that looks great on a desktop but breaks on a phone isn't finished. Responsive design is the practice of building layouts that adapt gracefully to any screen size — from a 320px mobile phone to a 2560px widescreen monitor.
This is the final lesson of the HTML & CSS Fundamentals course, and it pulls together everything you've learned: HTML structure, the box model, Flexbox, and Grid.
The Viewport Meta Tag
Before you write a single line of responsive CSS, you need this in every page's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without it, mobile browsers render the page at a virtual ~980px wide viewport and then scale it down — your CSS media queries won't work correctly. This tag tells the browser to use the actual device width as the viewport.
Media Queries
A media query applies CSS rules only when a condition is true:
/* Always applied */
.container {
width: 100%;
padding: 0 1rem;
}
/* Only applied when viewport is 768px wide or wider */
@media (min-width: 768px) {
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}
}Common Media Query Conditions
| Condition | Description |
|---|---|
min-width: 768px | Viewport is 768px or wider |
max-width: 767px | Viewport is 767px or narrower |
min-height: 600px | Viewport is at least 600px tall |
orientation: landscape | Device is in landscape mode |
prefers-color-scheme: dark | User prefers dark mode |
prefers-reduced-motion: reduce | User prefers less motion |
You can combine conditions:
@media (min-width: 768px) and (max-width: 1023px) {
/* Tablet-only styles */
}Mobile-First Design
Mobile-first means starting with mobile styles, then using min-width media queries to enhance for larger screens. This is the correct modern approach because mobile is the most constrained environment, min-width queries are generally easier to reason about, and mobile devices don't have to parse and override desktop styles they'll never use.
/* Base styles — for all screens, especially mobile */
.card-grid {
display: grid;
grid-template-columns: 1fr; /* single column on mobile */
gap: 1rem;
padding: 1rem;
}
/* Tablet: 2 columns */
@media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* Desktop: 3 columns */
@media (min-width: 900px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}Common Breakpoints
| Breakpoint | Common use |
|---|---|
480px | Large phones |
600px | Small tablets / large phones landscape |
768px | Tablets |
900px | Large tablets / small laptops |
1024px | Laptops |
1200px | Desktop |
1440px | Wide desktop |
You don't need all of these. Most designs work well with 2–3 breakpoints.
Fluid Typography with clamp()
The clamp() function creates fluid typography that scales smoothly between a minimum and maximum:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* minimum: 1.5rem
preferred: 4% of viewport width
maximum: 3rem */
}
p {
font-size: clamp(1rem, 2.5vw, 1.125rem);
}vw is a viewport unit: 1vw = 1% of the viewport width. On a 400px screen, 4vw = 16px; on a 1200px screen, 4vw = 48px (clamped to 3rem). No media queries needed for typography — the size adapts fluidly.
Responsive Images
Images should never overflow their container. This single rule fixes 90% of image overflow issues:
img {
max-width: 100%;
height: auto;
}Combine this with the srcset attribute from Lesson 3 to serve appropriately sized images:
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1000px) 800px, 1200px"
alt="A developer working on a laptop"
width="1200"
height="675"
loading="lazy"
>CSS Variables for Responsive Design
CSS custom properties make it easy to adjust a design systematically across breakpoints:
:root {
--spacing-base: 1rem;
--container-padding: 1rem;
}
@media (min-width: 768px) {
:root {
--spacing-base: 1.5rem;
--container-padding: 2rem;
}
}
.container {
padding: 0 var(--container-padding);
}Changing one variable updates every element that uses it.
Putting It All Together: A Responsive Page
/* === RESET === */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
/* === BASE (Mobile) === */
body {
font-family: 'Inter', system-ui, sans-serif;
color: #333;
line-height: 1.6;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background: #1a1a2e;
color: #fff;
}
.container {
padding: 2rem 1.5rem;
max-width: 1100px;
}
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); margin-bottom: 0.5rem; }
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* === TABLET (600px+) === */
@media (min-width: 600px) {
.container { padding: 2rem; }
.card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
/* === DESKTOP (900px+) === */
@media (min-width: 900px) {
.container { margin: 0 auto; padding: 3rem 2rem; }
.card-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}This single stylesheet handles mobile, tablet, and desktop with three clean breakpoints, mobile-first.
Previous: Lesson 9 — CSS Grid | Back to course overview
Part of the HTML & CSS Fundamentals course.