Responsive

Responsive design is the practice of building one layout that adapts to any screen size, using flexible units, fluid grids, and @media queries so a page looks great on phones, tablets, and desktops alike.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

💡 Think of It Like This

Imagine water in different containers: Water naturally fills whatever shape it's poured into — a glass, a bowl, a bottle. Responsive design works the same way: your content flows and adapts to whatever screen size it's viewed on, from a tiny phone to a giant desktop monitor.

Without responsive design, your website is like a rigid block of ice — it stays the same size no matter what container you put it in, and it overflows or looks broken on smaller screens.

1. Why Responsive Design Matters

Over 60% of all web traffic comes from mobile devices. If your website doesn't look good on a phone, most visitors will leave immediately. Google also uses mobile-first indexing , meaning it judges your site primarily by how it looks on mobile.

Without Responsive Design

With Responsive Design

Text too small to read on mobile

Text scales to readable size

Horizontal scrolling required

Content fits the screen width

Buttons too small to tap

Touch-friendly button sizes

Poor Google ranking

Better SEO and ranking

2. The Viewport Meta Tag (Required!)

Every responsive website must include this tag in the <head> . Without it, mobile browsers will render your page at desktop width (typically 980px) and then shrink it down, making everything tiny and unreadable.

Attribute

What It Does

width=device-width

Sets viewport width to the device's actual screen width

initial-scale=1.0

Sets initial zoom level to 100% (no zoom in or out)

⚠️ Common Mistake: Forgetting this meta tag is the #1 reason responsive CSS "doesn't work." Always add it first!

3. Media Queries — The Heart of Responsive Design

Media queries let you apply different CSS rules based on screen size . Think of them as "if statements" for CSS — "if the screen is smaller than 768px, do this."

4. Common Breakpoints

Breakpoints are the screen widths where your layout changes. Here are the most commonly used ones:

Device

Width Range

Media Query

📱 Mobile

320px – 768px

@media (max-width: 768px)

📱 Tablet

769px – 1024px

@media (max-width: 1024px)

💻 Laptop

1025px – 1440px

@media (max-width: 1440px)

🖥️ Desktop

1441px+

@media (min-width: 1441px)

💡 Pro Tip: Don't overthink breakpoints. Most projects only need 2-3: one for mobile (~768px), one for tablet (~1024px), and desktop is the default.

5. Mobile-First vs Desktop-First

There are two approaches to writing responsive CSS. Mobile-first is recommended by most professionals.

Approach

How It Works

Mobile-First ✅

Write mobile styles first, then add desktop overrides

@media (min-width: 768px)

Desktop-First

Write desktop styles first, then override for mobile

6. Responsive Units

Using the right CSS units is crucial for responsive design. Avoid fixed px values for things that should scale.

Unit

Relative To

Best For

Example

%

Parent element

Widths, containers

width: 80%;

vw / vh

Viewport width/height

Full-screen sections

height: 100vh;

rem

Root font size (16px)

Font sizes, spacing

font-size: 1.25rem;

em

Parent font size

Padding relative to text

padding: 1.5em;

7. Responsive Images

Images are one of the biggest causes of broken responsive layouts. By default, images render at their natural size, which can overflow containers on smaller screens.

💡 Pro Tip: Always add max-width: 100%; height: auto; to all images. Many CSS resets include this automatically.

8. Building a Complete Responsive Page

Let's put everything together — viewport meta tag, media queries, responsive units, and mobile-first design:

⚠️ Common Mistakes

🎉 Lesson Complete

You now understand responsive design — the skill that makes your websites work on every device. Key takeaways:

Practice quiz

What does the viewport meta tag do for a responsive page?

  • Loads media queries faster
  • Compresses images on mobile
  • Tells mobile browsers to set the viewport width to the device's actual screen width
  • Disables zooming entirely

Answer: Tells mobile browsers to set the viewport width to the device's actual screen width. Without <meta name="viewport" content="width=device-width, initial-scale=1.0">, mobile browsers render at ~980px desktop width and shrink the page, so it looks tiny.

Which media query applies styles only on screens 768px wide or narrower?

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

Answer: @media (max-width: 768px). max-width: 768px matches when the viewport is at or below 768px — the classic mobile/desktop-first breakpoint.

In a mobile-first approach, which type of media query do you add for larger screens?

  • max-width queries
  • aspect-ratio queries
  • no queries are needed
  • min-width queries

Answer: min-width queries. Mobile-first writes the base (small-screen) styles first, then layers on enhancements with min-width queries as the screen grows.

What is the rule of thumb for the number of breakpoints most sites need?

  • One per device model
  • 2-3 breakpoints
  • At least 10
  • None — use only fixed pixels

Answer: 2-3 breakpoints. Most projects need only 2-3 breakpoints (roughly mobile ~768px, tablet ~1024px, desktop default). More creates maintenance headaches.

What does the unit 'vw' refer to?

  • 1% of the viewport width
  • The parent element's width
  • The root font size
  • A fixed value in pixels

Answer: 1% of the viewport width. vw is relative to the viewport: 100vw is the full viewport width, so 50vw is always half the screen width.

Which unit is best for setting font sizes so text scales with the user's preference?

  • px
  • deg
  • rem
  • fr

Answer: rem. rem is relative to the root font size (16px by default), so it respects the user's chosen base size — ideal for fonts and spacing.

What is the essential CSS rule that keeps images from overflowing their container?

  • width: 100%; only
  • max-width: 100%; height: auto;
  • object-fit: cover; only
  • display: block;

Answer: max-width: 100%; height: auto;. max-width: 100% stops the image being wider than its container, and height: auto preserves the aspect ratio.

Why is using a fixed 'width: 800px' risky for responsive layouts?

  • It loads slowly
  • It disables media queries
  • It only works on desktop browsers
  • It overflows on screens narrower than 800px

Answer: It overflows on screens narrower than 800px. A fixed pixel width causes horizontal overflow on smaller screens. Use max-width: 800px with width: 100% instead so it can shrink.

What does 'mobile-first indexing' mean for SEO?

  • Google only indexes mobile apps
  • Google judges your site primarily by how it looks on mobile
  • Mobile pages load before desktop pages
  • Indexing is disabled on mobile

Answer: Google judges your site primarily by how it looks on mobile. Google primarily evaluates and ranks sites based on the mobile version, which is why responsive design directly affects SEO.

Why is hiding important content with display: none on mobile discouraged?

  • It slows the page down
  • It breaks media queries
  • It removes content users may still need; reorganise instead
  • It only hides images

Answer: It removes content users may still need; reorganise instead. Hiding important content with display: none denies it to mobile users. Better to reorganise the layout so the content is still reachable.

Continue this course