CSS Responsive Design

Putting it all together for every screen.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

A responsive website adapts to any screen. Combine the techniques from this tutorial:

Add the viewport meta tag to your HTML.
Use box-sizing: border-box everywhere.
Use relative units (%, rem, fr) and max-width.
Make images fluid: img { max-width: 100%; height: auto; }
Use Flexbox with flex-wrap or Grid with auto-fit and minmax().
Adjust the layout with mobile-first media queries.
Use clamp() for fluid font sizes: font-size: clamp(1.5rem, 4vw, 3rem);

Use the Layout button in the editor, or your browser's device mode (F12), to test different screen sizes.

Key Takeaways: CSS Responsive Design

Mastering CSS Responsive Design helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Responsive Design Code Example

CSS

<style>
  * { box-sizing: border-box; }
  body { margin: 0; font-family: Arial; }
  .hero { padding: 40px 20px; text-align: center; color: white; background: linear-gradient(135deg, #071A2F, #2563EB); }
  .hero h1 { font-size: clamp(1.6rem, 5vw, 3rem); margin: 0 0 8px; }
  .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 16px; }
  .feature { background: #F1F5F9; padding: 18px; border-radius: 10px; border-top: 4px solid #14B8A6; }
  img { max-width: 100%; height: auto; display: block; }
</style>

<section class="hero">
  <h1>Fluid heading with clamp()</h1>
  <p>Resize the result pane to see everything adapt.</p>
</section>
<div class="features">
  <div class="feature">Fast</div><div class="feature">Responsive</div><div class="feature">Accessible</div>
</div>
<img src="https://picsum.photos/id/1039/1200/300" alt="Landscape">

Free sign-in required · Google login available

CSS Responsive Design Practice Exercises

Check what you learned in “CSS Responsive Design”.

/ 3 solved

Fill in the blank

Create a responsive grid of cards at least 200px wide.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, (200px, 1fr));
}

✓ Correct! Not quite. Try again.

Multiple choice

What does clamp(1rem, 4vw, 2rem) do?

Keeps a value between a minimum and a maximum Rounds a number Hides text Sets three font sizes

✓ Correct! Not quite. Try again.

Code challenge

Make the heading font size fluid with clamp() (any values).

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Responsive Design

💡 Key Takeaways: CSS Responsive Design

CSS Responsive Design Code Example

CSS Responsive Design Practice Exercises

Key Takeaways: CSS Responsive Design