Responsive Design›Core· 35 min read

Responsive Web Design

Make one site look great on every screen — phone, tablet and desktop. Mobile-first is the modern mindset.

What you will learn

Add the viewport meta tag
Understand fluid, flexible layouts
Adopt a mobile-first approach

What makes a site responsive?

The viewport meta tag in the <head> (non-negotiable).
Flexible widths (%, fr, max-width) instead of fixed pixels.
Flexible images (max-width: 100%).
Media queries that adjust the layout at different widths.

Always put this in the <head>

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

This one line in the <head> is non-negotiable for responsive design. width=device-width tells the phone “use your real screen width”, and initial-scale=1.0 means “do not zoom in or out to start”. Without it, a phone pretends to be a 980px desktop and shrinks the whole page — so your text is tiny and your media queries never trigger. Always include it.

Fluid by default

“Fluid” means a layout that stretches and shrinks to fit any screen instead of staying a fixed size. The two rules below make a container and an image fluid using max-width — read them, then see how each one flexes:

A fluid, flexible container

<style>
  .wrap { max-width: 600px; margin: 0 auto; padding: 16px; }
  img { max-width: 100%; height: auto; border-radius: 8px; }
</style>
<div class="wrap">
  <img src="https://picsum.photos/900/250" alt="banner">
  <p>This container is centred, never wider than 600px, and the image shrinks to fit. Resize the preview!</p>
</div>

Live preview

Two rules make this “fluid”. The .wrap uses max-width: 600px with margin: 0 auto, so it stays centred and never grows past 600px on big screens but freely shrinks on small ones. The img rule max-width: 100%; height: auto is the key for flexible images: the image will never be wider than its container, and height: auto keeps its proportions so it never looks squashed. Drag the preview narrower and both the box and the image shrink together.

Tip: Mobile-first means you write your base styles for small screens, then use media queries to add enhancements for larger screens. It leads to simpler, more robust CSS.

Q. Which is essential for responsive design to work on phones?

Answer: Without the viewport meta tag, phones render a zoomed-out desktop layout and media queries will not behave as intended.

✍️ Practice

Add the viewport tag and make a container fluid with max-width and centred.
Make every image on a page flexible with max-width: 100%.

🏠 Homework

Audit a project: is it fluid? Add max-width, flexible images and the viewport tag where missing.