9 minutes·Lesson 6 of 6

Responsive Design and Media Queries

What is Responsive Design?

Responsive design is the practice of building web pages that look and work well on any screen size — from a small mobile phone to a large desktop monitor. A responsive page adapts its layout, typography, and content to fit the available space.

This is not optional. As of today, more than half of all web traffic comes from mobile devices. If your site only looks good on a desktop, you are excluding the majority of your users.

The Mobile-First Approach

There are two philosophies for writing responsive CSS:

Desktop-first — write styles for large screens, then use media queries to adjust for smaller screens (max-width)
Mobile-first — write styles for small screens, then use media queries to enhance for larger screens (min-width)

Mobile-first is the industry standard. It has several advantages:

Smaller screens get simpler, faster CSS
You build up complexity as more space is available
It aligns with how browsers and search engines prioritise mobile

Write your base CSS for mobile, then add styles for larger screens:

/* Base — for all screen sizes (mobile-first) */
.hero { padding: 40px 16px; font-size: 1.5rem; }

/* Tablet and up (768px+) */
@media (min-width: 768px) {
  .hero { padding: 80px 32px; font-size: 2.5rem; }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {
  .hero { padding: 120px 64px; font-size: 3.5rem; }
}

Media Queries

A media query is a CSS rule that applies styles only when certain conditions are true — most commonly when the viewport width is above or below a threshold:

@media (min-width: 768px) {
  /* These styles apply only when the viewport is 768px wide or wider */
}

@media (max-width: 767px) {
  /* These styles apply only when the viewport is 767px wide or narrower */
}

Common Breakpoints

Breakpoints are the viewport widths at which your layout changes. Common ones used by most design systems:

Name	Width	Typical devices
Mobile	< 640px	Phones
Small	640px	Large phones
Tablet	768px	Tablets, small laptops
Desktop	1024px	Laptops
Wide	1280px	Desktop monitors

There is no universal correct set of breakpoints. Choose them based on your content and design, not based on specific device models.

Responsive Typography

Font sizes should scale with screen size:

/* Mobile */
h1 { font-size: 1.75rem; }

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
}

Fluid Typography with clamp()

The clamp() function sets a value that scales smoothly between a minimum and maximum, eliminating the need for multiple breakpoints for font sizes:

h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }

This reads as: "use 5% of the viewport width as the font size, but never go below 1.75rem or above 3.5rem." The font scales smoothly with the screen size.

Responsive Layout Patterns

Single Column to Multi-Column

The most common pattern: a single column on mobile, multiple columns on wider screens.

/* Mobile: single column */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Desktop: multi-column row */
@media (min-width: 768px) {
  .cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card {
    flex: 1 1 280px;
  }
}

Grid-based Responsive Columns (No Media Queries)

As covered in the Grid lesson, auto-fill with minmax achieves responsiveness without any breakpoints:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

Responsive Navigation

Hiding and showing navigation elements is a common pattern:

/* Mobile: hide desktop nav, show a menu button */
.desktop-nav { display: none; }
.menu-btn    { display: block; }

/* Desktop: show nav, hide menu button */
@media (min-width: 768px) {
  .desktop-nav { display: flex; }
  .menu-btn    { display: none; }
}

The Viewport Meta Tag

Without this tag in your HTML <head>, mobile browsers will zoom out and render your page as if it were a desktop screen:

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

This tells the mobile browser:

width=device-width — use the actual device width, not a simulated desktop width
initial-scale=1.0 — do not zoom in or out initially

Always include this tag. Without it, none of your media queries will behave correctly on mobile.

Testing Responsive Designs

You do not need a physical device to test responsiveness. Every modern browser has built-in responsive design tools:

Open your page in Chrome, Firefox, or Safari
Right-click and select Inspect (or press F12)
Click the Toggle device toolbar button (the mobile/tablet icon)
Select a device preset or drag the width to simulate different screen sizes

A Complete Responsive Page

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #0F1C3A;
}

.nav-links {
  display: none;           /* hidden on mobile */
}

@media (min-width: 768px) {
  .navbar { padding: 16px 48px; }
  .nav-links { display: flex; gap: 32px; }
}

/* Hero section */
.hero {
  text-align: center;
  padding: 60px 24px;
}

.hero h1 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #181A20;
  margin-bottom: 16px;
}

/* Card grid — responsive without media queries */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  padding: 40px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

Practice Exercise

Make an existing page fully responsive:

Ensure the viewport meta tag is in the HTML <head>
Write mobile styles first (single column, smaller text)
Add a @media (min-width: 768px) block that switches the cards to a two-column layout
Add a @media (min-width: 1024px) block for a three-column layout
Use clamp() for the heading font size so it scales smoothly
Hide the desktop navigation and show a placeholder menu button on mobile

Try it yourself

Preview

Key Takeaways

Responsive design ensures web pages look and work well on all screen sizes, from mobile phones to desktops
Mobile-first means writing base CSS for small screens and using min-width media queries to enhance for larger screens
The viewport meta tag (width=device-width) is essential for media queries to work correctly on mobile devices
clamp(min, preferred, max) creates fluid typography that scales smoothly without breakpoints
repeat(auto-fill, minmax(280px, 1fr)) is a zero-media-query responsive grid pattern
Use browser developer tools (F12) to test different screen sizes without a physical device

Quick Quiz

1.Why is the mobile-first approach recommended for responsive design?

2.What does the viewport meta tag 'width=device-width' tell the browser?

3.What does this CSS declaration do: font-size: clamp(1.5rem, 5vw, 3rem)?

4.Which approach creates a responsive card grid without any media queries?

← CSS Grid Back to Module →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx