HTML Responsive Web Design Basics

Responsive web design makes one HTML page look good on phones, tablets and desktops. Learn the viewport meta tag, responsive images, flexible text, a first media query and how to test on mobile.

What is responsive web design?

Responsive web design means building a page that responds to the size of the screen. The same HTML file adapts: one column on a phone, two or three columns on a laptop, with images and text that fit nicely everywhere.

Think of water. Pour it into a glass, a bowl or a bottle, and it takes the shape of the container. A responsive page takes the shape of the screen. Today more than half of all web visits come from phones, so this is not optional anymore.

Responsive design rests on four simple ideas:

1. The viewport meta tag, so phones show the real width.
2. Flexible images that shrink to fit.
3. Flexible text and widths, using relative units.
4. Media queries, to change the layout at certain screen sizes.

The viewport meta tag

You have seen this line in every page in this course. Here is why it matters so much.

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

Without it, a phone pretends its screen is about 980 pixels wide, draws your page at that size, and then shrinks everything down. Your text becomes tiny and people must pinch to zoom. With it:

• width=device-width makes the page as wide as the real screen.
• initial-scale=1 starts at normal zoom, not zoomed out.

Common mistake: Adding maximum-scale=1 or user-scalable=no to stop zooming. This blocks people with low vision from enlarging the text, and it fails accessibility guidelines. Let users zoom.

Responsive images with max-width

A photo that is 1600 pixels wide will stick out of a 390-pixel phone screen and cause sideways scrolling. One small CSS rule fixes this for every image:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mountain Cabin - Holiday Rentals</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Mountain Cabin</h1>
  <img src="images/cabin.jpg" alt="A wooden cabin beside a lake with mountains behind it" width="1600" height="1000">
  <p>Sleeps four. Wood stove, lake views and a hot tub.</p>
</body>
</html>

• max-width: 100% means "never be wider than your container". On a big screen the image can show at its full size; on a phone it shrinks to fit.
• height: auto keeps the right proportions, so the photo is not squashed.
• Keeping width and height in the HTML still helps: the browser reserves the right space before the image loads, so the page does not jump.

Why max-width and not width: 100%? With width: 100%, a small icon would stretch to fill the whole screen and look blurry. max-width only shrinks; it never stretches.

Note: To send smaller image files to phones (to save data), use srcset, sizes and <picture>. These are covered in the lesson about responsive images with srcset.

Responsive text and flexible widths

Fixed sizes in pixels don't adapt. Relative units do:

Unit	Means	Good for
%	Percent of the parent element	Widths
rem	Times the root font size (usually 16px)	Font sizes, spacing
em	Times the current element's font size	Padding inside buttons
vw	1% of the viewport width	Big headings that grow with the screen
ch	Width of the "0" character	Limiting line length for reading

A popular modern trick is clamp(), which sets a minimum, a preferred and a maximum size:

<style>
  body {
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
  }
  h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
  }
  .content {
    max-width: 65ch;
    margin: 0 auto;
    padding: 0 16px;
  }
</style>

<div class="content">
  <h1>How to Brew Better Coffee at Home</h1>
  <p>Good coffee starts with fresh beans, clean water and the right grind size. Let's go through each one.</p>
</div>

The heading grows with the screen width (5vw) but never gets smaller than 1.75rem or bigger than 3rem. The text column is at most 65 characters wide, which is comfortable to read, and it sits in the centre with 16 pixels of space on each side on a phone.

A first look at media queries

A media query is a CSS rule that only applies when a condition is true, like "the screen is at least 768 pixels wide". It is how layouts change from one column to several. The width where the design changes is called a breakpoint.

<style>
  .products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product {
    border: 1px solid #dddddd;
    padding: 16px;
    border-radius: 8px;
  }

  @media (min-width: 600px) {
    .products { grid-template-columns: 1fr 1fr; }
  }

  @media (min-width: 960px) {
    .products { grid-template-columns: 1fr 1fr 1fr; }
  }
</style>

<section class="products">
  <article class="product"><h2>Walking boots</h2><p>£89</p></article>
  <article class="product"><h2>Rain jacket</h2><p>£65</p></article>
  <article class="product"><h2>Day backpack</h2><p>£42</p></article>
</section>

On a phone you see one product per row. From 600 pixels wide you see two per row, and from 960 pixels you see three. Resize the browser window and watch the cards rearrange. You will learn media queries fully in the CSS course.

How to test your page on mobile

1. Resize the browser window. Make it narrow and wide, and look for text that is cut off or anything that causes sideways scrolling.
2. Use device mode in DevTools. Press F12, then click the phone-and-tablet icon (or Ctrl + Shift + M). Choose devices like iPhone or Pixel from the list, and rotate them.
3. Test on a real phone. Real touch, real fonts and real network speed show problems that DevTools miss. With VS Code's Live Server, you can open your page on a phone on the same Wi-Fi using your computer's local IP address.
4. Check tap targets. Buttons and links should be big enough for a finger, about 44 × 44 pixels, with space between them.

Tip: If your page scrolls sideways on a phone, something is too wide. In DevTools, look for an image without max-width: 100%, a long word or URL, a <pre> block, or a box with a fixed width like width: 800px.

Practice exercise

Take any page you have built in this course and make it responsive. Check it has the viewport meta tag, add the img rule with max-width: 100%, wrap the content in a container with max-width: 65ch, and add one media query that changes something (for example, a bigger font size or two columns) from 768 pixels. Test it in DevTools device mode.

Hint: start the media query with @media (min-width: 768px) { and close it with } after your rules.

Key takeaways

• Responsive design makes one page work on every screen size.
• Always include the viewport meta tag, and never block zooming.
• img { max-width: 100%; height: auto; } makes images shrink to fit.
• Use relative units like rem, %, ch and clamp() for flexible text and widths.
• Media queries change the layout at breakpoints; test in DevTools and on a real phone.