Responsive Web Design with CSS

Build pages that work on every screen: the mobile-first approach, fluid layouts, flexible units, breakpoints, and testing at phone, tablet and desktop widths.

Lesson 35 of 49Intermediate16 min read

Your visitors use phones, tablets, laptops and giant monitors, often all in the same day. Responsive web design is the practice of building a single page that adapts to every one of them. Instead of separate mobile and desktop sites, one set of HTML and CSS rearranges itself: three columns on a desktop become one on a phone, images shrink to fit, and text stays comfortable to read.

The term was coined by Ethan Marcotte in 2010, and it rests on three ideas: fluid layouts that use relative sizes instead of fixed pixels, flexible images that never overflow their container, and media queries that adjust the design at certain widths. Modern CSS adds powerful helpers, such as flexbox, grid, clamp() and container queries, that make many layouts responsive with no media queries at all.

This lesson brings the pieces together into a practical method: start mobile first, keep everything fluid, add breakpoints only where the design needs them, and test properly. The lessons that follow go deeper into responsive images, typography, layout patterns and navigation.

The foundations

  1. The viewport meta tag. Every responsive page needs <meta name="viewport" content="width=device-width, initial-scale=1"> in the head, or phones pretend to be 980 pixels wide and shrink everything. The HTML responsive design lesson covers it in detail.
  2. Border-box sizing. *, *::before, *::after { box-sizing: border-box; } stops padding from pushing boxes wider than the screen.
  3. Fluid media. img, video { max-width: 100%; height: auto; } keeps media inside its container.
  4. Relative units. rem for font sizes and spacing, % and fr for widths, ch for text columns, and viewport units where they make sense. Fixed pixel widths are the most common cause of sideways scrolling.

Mobile first

Mobile-first CSS writes the small-screen styles as the default, then adds styles for larger screens with min-width media queries:

CSS
.cards { display: grid; gap: 16px; }                 /* phones: one column */

@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }          /* tablets: two */
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }   /* desktops: three */
}

It works well because phone layouts are usually simpler: one column, stacked content. Each breakpoint then adds complexity, rather than undoing it. Phones also download and process less CSS that they don't need.

Choosing breakpoints

RangeTypical widthCommon changes
Small phones320 to 400pxSingle column, compact spacing
Large phones400 to 640pxSlightly larger text and images
Tablets640 to 1024pxTwo columns, side-by-side forms
Laptops1024 to 1440pxThree or four columns, sidebars
Large screens1440px and upMax-width containers keep lines readable

Don't chase specific devices; there are thousands of them. Instead, widen your browser slowly and add a breakpoint where the design starts to look wrong. Many sites use rem-based breakpoints such as 40rem and 64rem, so they also respond to the user's font size.

Intrinsic layouts: responsive without media queries

TechniqueWhat it does
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))As many columns as fit, each at least 240px
flex-wrap: wrap with flex: 1 1 250pxItems wrap onto new lines when space runs out
width: min(100% - 32px, 1100px)A centred container with side gutters
font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem)Text that scales smoothly
@container (min-width: 400px)Components that adapt to their own space

These are often called intrinsic layouts, because the content and available space decide the layout. Use them first, and add media queries for bigger structural changes.

CSS Responsive Design Syntax

Responsive essentials

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 48rem) { .sidebar-layout { grid-template-columns: 250px 1fr; } }

CSS Responsive Design Summary

  • One responsive page adapts to every screen with fluid layouts, flexible media and media queries.
  • Always include the viewport meta tag and use box-sizing: border-box.
  • Write mobile-first CSS: small-screen defaults, then min-width media queries.
  • Add breakpoints where your content breaks, not for specific devices.
  • Use intrinsic techniques like auto-fit, flex-wrap and clamp() to need fewer breakpoints.

CSS Responsive Design Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A mobile-first page

Drag the result panel narrower and wider. Watch the layout change at 600px.

* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }

.container { width: min(100% - 24px, 900px); margin-inline: auto; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0; }
.top a { margin-left: 12px; }

.layout { display: grid; gap: 16px; }
main, aside { background: #f1f5f9; padding: 16px; border-radius: 10px; }

@media (min-width: 600px) {
  .layout { grid-template-columns: 2fr 1fr; }
  .top { padding: 20px 0; }
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4A centred container with 12px gutters on phones.
  2. Line 5The header wraps if the logo and links don't fit side by side.
  3. Line 8On phones, main and aside stack in one column.
  4. Lines 11 to 14From 600px wide, the aside moves into a second column.
Example 2

An intrinsic card grid with no media queries

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  font: 600 15px sans-serif;
}

article {
  padding: 20px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3The grid fits as many 160px-or-wider columns as it can, then stretches them to fill the row.
  2. Line 4Even spacing between cards at every width.
Example 3

Fluid spacing and text

.hero {
  padding: clamp(20px, 6vw, 72px);
  background: #fff7ed;
  border-radius: 14px;
  font-family: sans-serif;
}

.hero h1 {
  font-size: clamp(1.75rem, 1rem + 4vw, 3.25rem);
  margin: 0 0 8px;
}

.hero p { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); margin: 0; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2Padding grows from 20px on phones to 72px on wide screens.
  2. Line 9The heading scales smoothly between a minimum and maximum size.
  3. Line 13Body text grows gently too.

Common CSS Responsive Design Mistakes

Desktop-first with max-width everywhere

Don't
.grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
Do
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

One intrinsic rule replaces four breakpoints.

Fixed widths

Don't
.page { width: 1200px; }
.sidebar { width: 400px; }
Do
.page { max-width: 1200px; margin-inline: auto; }
.sidebar { width: min(100%, 400px); }

Hiding content on mobile

Don't
@media (max-width: 600px) { .details, .reviews { display: none; } }
Do
@media (max-width: 600px) { .details, .reviews { font-size: 0.95rem; } }

Phone users want the same information. Rearrange or collapse content instead of removing it.

CSS Responsive Design in Real Projects

Responsive design today

Google indexes the mobile version of pages first, so responsive problems can hurt search rankings. Frameworks such as Tailwind CSS and Bootstrap are mobile first, with breakpoint prefixes like md: that mean "from medium screens up". Design teams create layouts at a few key widths, then developers fill the gaps with fluid techniques. Codevra's own pages are tested at 360 pixels wide on every change.

CSS Responsive Design Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the mobile-first media query for screens 768px and wider.

@media (: 768px) {
  .layout { grid-template-columns: 1fr 1fr; }
}
Multiple choiceeasy

What does mobile first mean?

Multiple choicemedium

Where should you add a breakpoint?

Multiple choicemedium

Which line makes a responsive grid without media queries?

Fix the bugmedium

This page overflows on phones. Use border-box sizing, a fluid container capped at 800px, and a fluid image.

.page { width: 800px; padding: 20px; }
.pic { width: 1200px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Page uses border-box
  • Page is capped at 800px
  • Image is fluid

CSS Responsive Design Quiz

5 questions to check what you learned.

  1. What are the three original ingredients of responsive design?

    • Fluid layouts, flexible images and media queries
    • HTML, CSS and JavaScript
    • Flexbox, grid and floats
    • Phones, tablets and desktops

  2. Why test at 360px wide?

    • It's the largest phone size
    • Browsers require it
    • It's the default desktop size
    • It's a common small phone width where overflow bugs show up

  3. Which media query is mobile first?

    • @media (max-width: 768px)
    • @media (device: phone)
    • @media (min-width: 768px)
    • @media screen and (mobile)

  4. What is the most common cause of sideways scrolling on phones?

    • Too many colours
    • Fixed pixel widths that are wider than the screen
    • Using rem
    • Flexbox

  5. Why use rem-based breakpoints such as 48rem?

    • They load faster
    • px isn't allowed in media queries
    • They're required by Google
    • The layout also adapts when the user increases their default font size

CSS Responsive Design Challenge

A responsive product page

  1. Make .page width: min(100% - 32px, 960px) and centre it with margin-inline: auto
  2. Make .products a grid with grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) and gap: 16px
  3. Make all img elements max-width: 100% and height: auto
  4. From min-width: 800px, give .layout display: grid and grid-template-columns: 240px 1fr
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Page is capped and centred
  • Products use an auto-fit grid
  • Images are fluid
  • Two-column layout on wide screens

Related CSS topics

34Media QueriesAdapt layouts to phones, tablets and desktops, starting with mobile.38Responsive LayoutsBuild the layouts every site needs, card grids, sidebars, holy grail pages, switchers and sticky footers, so they adapt to any screen with grid and flexbox.40Responsive DesignMake pages work on every screen: the viewport meta tag, fluid images and video, responsive tables, mobile-friendly forms and navigation, and testing on phones.
Esc
↑↓ to navigateEnter to open