responsive design

Why not fixed widths? A 1920px desktop screen has more than twice the space of a 1366px laptop. With pixels, you design for a single snapshot; with relative units, you let the browser do the math. That costs nothing and yields a layout that works at any width between your breakpoints.

Step 2: Apply flexible images

Images are the most common cause of horizontal scrolling. An image 1200px wide inside a 600px container pushes the layout apart.

img, video, iframe {
    max-width: 100%;
    height: auto;
}

Add this block to your global stylesheet, not per image. It applies to all media you ever add. The `height: auto` ensures the aspect ratio stays intact when the width is constrained.

For modern browsers, you can use the `srcset` attribute to offer different files:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Description of the image">

The browser itself chooses the right file based on screen size and network speed. You pay a price here: you must generate and maintain multiple versions of each image. For a small site with few images, `max-width: 100%` is sufficient.

Step 3: Add media queries

Media queries apply styles conditionally. The Media Queries Level 4 specification is now the standard, but Level 3 (from 2012) remains widely supported and covers nearly all practical cases.

/<em> Base styles: mobile first </em>/
body {
    font-size: 16px;
}</p><p>/<em> Tablet: 768px and wider </em>/
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}</p><p>/<em> Desktop: 1024px and wider </em>/
@media (min-width: 1024px) {
    .col-main {
        grid-column: span 8;
    }
    .col-side {
        grid-column: span 4;
    }
}

If you write mobile styles first and then expand with `min-width` media queries, you won't need to undo styles on small screens. That keeps your CSS readable. The downside: you must consciously think about which styles you want on mobile, rather than building desktop first and then shrinking it.

Step 4: Set the viewport meta tag

Without this tag, a mobile browser treats your page as a desktop window 980px wide and scales it down. Your media queries then never work as intended.

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

This line tells the browser that the viewport matches the actual screen width of the device. `initial-scale=1.0` ensures no default zoom level is applied. Place this tag in the `` of every page you want to make responsive.

Step 5: Scale typography with relative units

Fixed font sizes in pixels work on every screen, but they don't scale along. Use `rem` for font sizes — 1 rem equals the root font size, 16px by default.

html {
    font-size: 16px;
}</p><p>h1 {
    font-size: 2rem; /<em> 32px </em>/
}</p><p>h2 {
    font-size: 1.5rem; /<em> 24px </em>/
}</p><p>body {
    font-size: 1rem; /<em> 16px </em>/
}

If you later want to adjust base sizes per breakpoint, you only change the `font-size` on `html` and the rest scales along. If a visitor uses a larger default font size in their browser, your site respects that choice — something impossible with pixels.

Step 6: Choose breakpoints based on content

The most common mistake is tying breakpoints to specific devices. The iPhone 14 Pro is 393px wide, the Pixel 8 is 412px. In a year, those numbers will be different. Choose breakpoints where your layout breaks: where the sidebar menu gets too narrow, where the text column gets too long.

/<em> Where the layout starts to pinch </em>/
@media (min-width: 45rem) { /<em> 720px </em>/
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}</p><p>@media (min-width: 70rem) { /<em> 1120px </em>/
    .nav {
        display: flex;
        justify-content: space-between;
    }
}

A two-column layout only needs two or three breakpoints. Every extra media query means extra maintenance and more possible combinations to test. Start with one breakpoint around 768px and only add a second one if the layout calls for it.

Step 7: Testing in the browser

Your browser's developer tools have a device display mode. In Chrome 120+ and Firefox 115+ you can switch between presets like iPhone and iPad, or enter a custom width.

Open the developer tools with F12, click on the device icon (Chrome) or the responsive design icon (Firefox), and drag the viewport to different widths. Check at 320px, 768px and 1440px that no horizontal scrolling occurs and that no elements overlap.

<h2>Check whether the site scrolls horizontally (run in the developer tools console)</h2>
document.documentElement.scrollWidth <= window.innerWidth

This line returns `true` if everything fits within the viewport. If the site does overflow, you can find the culprit by selecting each element in the developer tools and seeing which element is wider than its container.

Verification

Open your site at at least three widths — a narrow mobile screen (320px), a tablet (768px) and a desktop (at least 1280px). Check each size for:

<h2>Via the command line with curl and a user-agent</h2>
curl -s -o /dev/null -w "%{http_code}" https://jouwsite.nl

This check only confirms that the server is reachable. The real test is visual. Slowly resize your browser window from wide to narrow. Smooth transitions mean your fluid grids and flexible images are set up correctly. Abrupt jumps at fixed points are your media queries — that's normal. A site that never scrolls horizontally and where text and images remain readable is responsive.

Frequently asked problems

Horizontal scroll on mobile despite `max-width: 100%`

An element within your layout is wider than its container. This could be a `pre` block with long code, a table, or an element with a fixed pixel width. Find it with the console check above and add:

pre, table {
    overflow-x: auto;
}

Media queries don't work on mobile

You haven't added the viewport meta tag, or it isn't in the `` but elsewhere on the page. Without this tag, the mobile browser uses a virtual viewport of 980px and your media queries based on `min-width` never become active.

Images scale along but remain heavy to load

`max-width: 100%` visually shrinks an image, but the file stays the same size. A 1600px image of 800KB is still downloaded as 800KB on mobile. Use `srcset` and `sizes` to offer smaller files for small screens. Generators such as `sharp` (Node.js 18+) or `ImageMagick 7` can produce the variants automatically.

Responsive design isn't a separate technique you switch on, but a way of building that is part of every CSS decision. Fixed widths are the exception, relative units the rule. Once you follow that pattern, you'll automatically add new components responsively — and media queries become less and less necessary as grids and images become more flexible. The next time you come across a fixed `width: 1200px`, you'll ask yourself why it's still there.