CSS Responsive Design Tutorial: 7 Essential Techniques

Welcome to this CSS responsive design tutorial. Responsive design means your website looks good and works properly on every screen size — phones, tablets, laptops, and large monitors.

This is Tutorial 8 of 10 in our complete CSS series on Tutorials Ocean’s CSS category. If you missed it, check out Tutorial 7: CSS Grid first.

The Viewport Meta Tag

Before any CSS responsive design tutorial can begin, one line in your HTML head is required.

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

Without this tag, mobile browsers render your page at desktop width and then shrink it down, making text tiny and unreadable. This single line tells the browser to match the page width to the actual device width.

What is a Media Query?

A media query lets you apply different CSS rules based on screen size. This is the core mechanism behind any CSS responsive design tutorial.

.container {
    width: 100%;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

The rules inside @media only apply when the condition is true — in this case, when the screen width is 768px or smaller.

Common Breakpoints

There’s no single “correct” set of breakpoints, but most projects in a CSS responsive design tutorial follow a similar pattern.

For the full official reference, check the MDN documentation on media queries.

Mobile-First vs Desktop-First

There are two approaches in any CSS responsive design tutorial, and the difference matters for how you write your media queries.

/* Mobile-first: base styles for mobile, then scale up */
.container {
    display: block;
}

@media (min-width: 768px) {
    .container {
        display: flex;
    }
}

/* Desktop-first: base styles for desktop, then scale down */
.container {
    display: flex;
}

@media (max-width: 768px) {
    .container {
        display: block;
    }
}

Mobile-first writes base styles for small screens, then uses min-width queries to add complexity as the screen grows. Desktop-first does the opposite. Most modern projects favor mobile-first, since more traffic comes from mobile devices today.

Making Grids Responsive

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

This pattern reduces the number of columns as the screen shrinks — 4 columns on desktop, 2 on tablet, 1 on mobile. It’s one of the most common patterns taught in any CSS responsive design tutorial.

Responsive Images

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

This one rule prevents images from overflowing their container on small screens, while keeping the image’s natural aspect ratio intact using height: auto.

Hiding & Showing Elements Responsively

.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
}

This is the standard technique behind hamburger menus — the desktop navigation hides and a mobile menu icon appears once the screen gets small enough.

Practice Exercise

Open the style.css file from Tutorial 7 and make your page fully responsive.

Requirements:

1. Confirm your viewport meta tag is present in your HTML head
2. Add a media query at max-width: 768px that reduces your grid from 3-4 columns down to 2
3. Add a second media query at max-width: 480px that reduces the grid down to 1 column
4. Add max-width: 100% and height: auto to all your images
5. Hide your desktop navigation and show a simple mobile menu placeholder below 768px

Bonus challenge: Resize your browser window slowly from full width down to mobile size, and note every point where your layout breaks or looks awkward — then add a media query to fix each one.

Save your file, open your browser’s device toolbar (inspector), and test your page across a few different device presets.

What’s Next?

This completes Tutorial 8 of our CSS responsive design tutorial series. In Tutorial 9, we’ll cover CSS transitions, animations, and transforms — bringing motion and interactivity into your designs.

This CSS responsive design tutorial is part of the complete CSS series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.