CSS Responsive Web Design Complete Tutorial

Responsive Web Design is the process of creating websites that automatically adapt to different screen sizes, devices, resolutions, and user environments. A responsive website should be easy to read, easy to navigate, and visually comfortable on desktop computers, laptops, tablets, and mobile phones.

Responsive design is not only about making a website smaller on mobile screens. It is about designing flexible layouts, readable typography, adaptive images, touch-friendly buttons, and content that works well in different conditions.

Important: Modern responsive design is usually built with flexible CSS units, media queries, Flexbox, CSS Grid, responsive images, fluid typography, and sometimes container queries.

1. The Viewport Meta Tag

Before writing responsive CSS, every responsive HTML page should include the viewport meta tag inside the <head> section.

HTML

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

This tag tells the browser that the page width should match the device width. Without it, mobile browsers may render the page as a large desktop layout and then shrink it visually. That makes text too small and forces users to zoom.

2. What Is the Viewport?

The viewport is the visible area of a web page inside the browser window. On a desktop computer, the viewport changes when the user resizes the browser. On a mobile phone, the viewport usually matches the screen width.

Responsive CSS often reacts to the viewport width. For example, a layout may have three columns on a wide screen, two columns on a tablet, and one column on a mobile phone.

3. Fixed Layout vs Responsive Layout

A fixed layout uses exact pixel widths. This can easily break on small screens.

Bad CSS: Fixed Width

.container {
    width: 1200px;
    margin: 0 auto;
}

If the screen is only 390px wide, a 1200px container will cause horizontal scrolling. That is bad for mobile users.

Better CSS: Flexible Width

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

This layout is flexible. The container takes 90% of the available width, but it never becomes wider than 1200px.

4. CSS @media Rules Explained

The @media rule is one of the most important parts of responsive CSS. It allows you to apply CSS only when certain conditions are true.

Basic @media Syntax

@media media-type and (media-feature) {
    selector {
        property: value;
    }
}

A simple example:

CSS

@media screen and (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

This means: apply this CSS only on screens when the viewport width is 768px or smaller.

Parts of a Media Query

Media Query Anatomy

@media screen and (max-width: 768px)

This media query contains:

@media — starts the media rule.
screen — targets screens.
and — combines conditions.
(max-width: 768px) — condition that must be true.

5. Media Types

Media types describe the general category of the output device.

Media Type	Meaning
`all`	Applies to all devices.
`screen`	Applies to screens such as phones, tablets, laptops, and monitors.
`print`	Applies when the page is printed.
`speech`	Applies to speech-based devices.

Print Example

@media print {
    nav,
    .sidebar,
    .advertisement {
        display: none;
    }

    body {
        color: black;
        background: white;
        font-size: 12pt;
    }
}

This removes navigation, sidebar, and advertisements when the page is printed.

6. max-width Media Query

The max-width media feature means: apply the CSS when the viewport is equal to or smaller than a specific width.

CSS

@media (max-width: 768px) {
    .box {
        width: 100%;
        font-size: 16px;
    }
}

This is often used in desktop-first responsive design.

Viewport Width	Does `max-width: 768px` apply?
1200px	No
900px	No
768px	Yes
480px	Yes

7. min-width Media Query

The min-width media feature means: apply the CSS when the viewport is equal to or larger than a specific width.

CSS

@media (min-width: 768px) {
    .box {
        width: 50%;
    }
}

This is commonly used in mobile-first responsive design.

Viewport Width	Does `min-width: 768px` apply?
480px	No
767px	No
768px	Yes
1200px	Yes

8. Combining Media Query Conditions

You can combine multiple conditions with and.

Tablet Range Example

@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 94%;
    }
}

This CSS applies only when the viewport is between 768px and 1024px.

9. Comma in Media Queries

A comma means OR. If any condition is true, the CSS will apply.

OR Condition

@media (max-width: 600px), (orientation: portrait) {
    .hero {
        padding: 30px;
    }
}

This applies if the screen is 600px or smaller OR if the device is in portrait orientation.

10. Orientation Media Queries

Orientation media queries check whether the viewport is in portrait or landscape mode.

CSS

@media (orientation: portrait) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

@media (orientation: landscape) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

Portrait usually means the height is greater than the width. Landscape usually means the width is greater than the height.

11. Mobile-First Responsive Design

Mobile-first means writing the default CSS for small screens first. Then, you use min-width media queries to improve the layout on larger screens.

Mobile-First CSS

.card {
    width: 100%;
    padding: 16px;
}

/* Tablet */
@media (min-width: 768px) {
    .card {
        width: 50%;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .card {
        width: 33.333%;
    }
}

Mobile-first CSS is usually cleaner because small screens get the simplest layout first.

12. Desktop-First Responsive Design

Desktop-first means writing the default CSS for large screens first. Then, you use max-width media queries to adjust the layout for smaller screens.

Desktop-First CSS

.card {
    width: 33.333%;
    padding: 24px;
}

/* Tablet */
@media (max-width: 1024px) {
    .card {
        width: 50%;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .card {
        width: 100%;
    }
}

Recommendation: For new websites, mobile-first is often better. For older desktop websites, desktop-first may be easier when converting the layout to responsive.

13. Common Breakpoints

Breakpoints are screen widths where the layout changes. There is no perfect universal list, but these values are commonly used:

Common Breakpoints

/* Small phones */
@media (max-width: 480px) { }

/* Large phones */
@media (max-width: 600px) { }

/* Tablets */
@media (max-width: 768px) { }

/* Small laptops */
@media (max-width: 1024px) { }

/* Large desktops */
@media (min-width: 1200px) { }

Important: Do not create breakpoints only because popular devices exist. Create a breakpoint when your layout starts to look bad.

14. Responsive Typography

Text must be readable on every device. Avoid tiny text on mobile screens.

Responsive Typography with Media Queries

body {
    font-size: 16px;
}

h1 {
    font-size: 32px;
}

@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 48px;
    }
}

Fluid Typography with clamp()

The clamp() function is excellent for responsive text because it defines a minimum, flexible, and maximum value.

CSS clamp()

h1 {
    font-size: clamp(32px, 6vw, 64px);
}

p {
    font-size: clamp(16px, 2vw, 20px);
}

The heading will never be smaller than 32px and never larger than 64px.

15. Responsive Images

Images should not overflow their containers. A basic responsive image rule is:

CSS

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

A modern logical-property version is:

Modern CSS

img {
    max-inline-size: 100%;
    block-size: auto;
}

Responsive Images with srcset

The srcset attribute lets the browser choose the most suitable image file for the user's device.

HTML

<img 
    src="image-800.jpg"
    srcset="image-400.jpg 400w,
            image-800.jpg 800w,
            image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1000px) 80vw,
           800px"
    alt="Responsive example image">

This helps performance because mobile users do not always need to download a large desktop image.

16. Responsive Navigation Menu

Navigation is one of the most important responsive elements. A desktop menu is often horizontal, while a mobile menu may become vertical.

HTML

<nav class="main-menu">
    <a href="#">Home</a>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
    <a href="#">PHP</a>
</nav>

CSS

.main-menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    background: #111827;
    padding: 16px;
}

.main-menu a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.main-menu a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .main-menu {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

17. Responsive Layout with Flexbox

Flexbox is excellent for responsive layouts because items can shrink, grow, and wrap.

HTML

<div class="cards">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

CSS

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 280px;
    padding: 24px;
    background: #f3f4f6;
    border: 1px solid #ddd;
    border-radius: 10px;
}

The value flex: 1 1 280px means:

1 — the item can grow.
1 — the item can shrink.
280px — the preferred starting width.

18. Responsive Layout with CSS Grid

CSS Grid is perfect for galleries, article lists, cards, product layouts, and dashboards.

HTML

<div class="article-grid">
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>
</div>

CSS Grid Auto-Fit

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.article-grid article {
    padding: 24px;
    background: #f9fafb;
    border: 1px solid #ddd;
    border-radius: 10px;
}

This is one of the cleanest responsive CSS patterns. The browser automatically creates as many columns as can fit.

19. Complete Responsive Page Example

HTML

<div class="page">

    <header class="site-header">
        <h1>Responsive Website</h1>
        <p>A complete responsive layout example</p>
    </header>

    <nav class="site-nav">
        <a href="#">Home</a>
        <a href="#">Tutorials</a>
        <a href="#">Examples</a>
        <a href="#">Contact</a>
    </nav>

    <main class="layout">

        <article class="content">
            <h2>Main Content</h2>
            <p>
                This is the main content area. On desktop screens,
                it appears next to the sidebar. On mobile screens,
                it becomes a single-column layout.
            </p>
        </article>

        <aside class="sidebar">
            <h3>Sidebar</h3>
            <p>Additional links, ads, or related content can be placed here.</p>
        </aside>

    </main>

</div>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: #ffffff;
    color: #222;
}

.page {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}

.site-header {
    padding: 50px 20px;
    text-align: center;
    background: #1f2937;
    color: white;
}

.site-header h1 {
    font-size: clamp(36px, 6vw, 64px);
    margin: 0;
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 16px;
    background: #e5e7eb;
}

.site-nav a {
    color: #111827;
    text-decoration: none;
    font-weight: bold;
}

.layout {
    display: flex;
    gap: 24px;
    margin: 30px 0;
}

.content {
    flex: 3;
    padding: 24px;
    background: #f9fafb;
    border: 1px solid #ddd;
}

.sidebar {
    flex: 1;
    padding: 24px;
    background: #f3f4f6;
    border: 1px solid #ddd;
}

@media (max-width: 768px) {
    .site-nav {
        flex-direction: column;
        text-align: center;
    }

    .layout {
        flex-direction: column;
    }
}

20. Responsive Tables

Tables are difficult on small screens because they often contain too many columns. One practical solution is horizontal scrolling inside a wrapper.

HTML

<div class="responsive-table">
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
            <th>Status</th>
        </tr>
        <tr>
            <td>John Smith</td>
            <td>john@example.com</td>
            <td>USA</td>
            <td>Active</td>
        </tr>
    </table>
</div>

CSS

.responsive-table {
    overflow-x: auto;
}

.responsive-table table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
    padding: 12px;
    border: 1px solid #ccc;
}

.responsive-table th {
    background: #f2f6ff;
}

21. Responsive Buttons

Buttons should be large enough for touch screens. On small screens, important buttons often look better as full-width buttons.

CSS

.button {
    display: inline-block;
    padding: 14px 22px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

.button:hover {
    background: #1d4ed8;
}

@media (max-width: 480px) {
    .button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

22. Media Queries for Hover and Touch Devices

Some devices have a mouse and support hover. Phones usually do not. You can use media queries to apply hover effects only when hover is available.

CSS

@media (hover: hover) {
    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
}

@media (pointer: coarse) {
    .button {
        padding: 16px 24px;
    }
}

pointer: coarse usually targets touch screens, where the user's finger is less precise than a mouse pointer.

23. prefers-color-scheme

You can adapt your design to the user's light or dark mode preference.

Dark Mode Example

@media (prefers-color-scheme: dark) {
    body {
        background: #111827;
        color: #f9fafb;
    }

    .card {
        background: #1f2937;
        border-color: #374151;
    }
}

24. prefers-reduced-motion

Some users prefer reduced animations. You can respect that preference with CSS.

Reduced Motion Example

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

25. Container Queries

Media queries react to the viewport. Container queries react to the size of a parent container. This is very useful for reusable components.

For example, the same card component may appear in a wide content area or inside a narrow sidebar. With container queries, the card can adapt to its own container instead of the entire screen.

HTML

<div class="card-wrapper">
    <article class="profile-card">
        <img src="avatar.jpg" alt="User avatar">
        <div>
            <h3>John Smith</h3>
            <p>Frontend developer and CSS enthusiast.</p>
        </div>
    </article>
</div>

CSS Container Query

.card-wrapper {
    container-type: inline-size;
}

.profile-card {
    display: block;
    padding: 20px;
    background: #f3f4f6;
    border-radius: 12px;
}

.profile-card img {
    width: 100%;
    max-width: 160px;
    border-radius: 50%;
}

@container (min-width: 500px) {
    .profile-card {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .profile-card img {
        width: 140px;
    }
}

26. Media Queries vs Container Queries

Feature	Media Queries	Container Queries
React to	Viewport/device features	Parent container size
Best for	Page layout	Reusable components
Example	Change whole page layout on mobile	Change card layout when card area is wide enough

27. Complete Responsive Card Grid

HTML

<section class="products">
    <article class="product-card">
        <img src="product1.jpg" alt="Product 1">
        <h3>Product One</h3>
        <p>Short product description goes here.</p>
        <a href="#" class="button">View Product</a>
    </article>

    <article class="product-card">
        <img src="product2.jpg" alt="Product 2">
        <h3>Product Two</h3>
        <p>Short product description goes here.</p>
        <a href="#" class="button">View Product</a>
    </article>

    <article class="product-card">
        <img src="product3.jpg" alt="Product 3">
        <h3>Product Three</h3>
        <p>Short product description goes here.</p>
        <a href="#" class="button">View Product</a>
    </article>
</section>

CSS

.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.product-card {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: white;
}

.product-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.product-card h3 {
    margin-top: 16px;
}

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

@media (min-width: 1100px) {
    .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

28. Common Responsive Design Mistakes

Using fixed widths everywhere.
Forgetting the viewport meta tag.
Making text too small on mobile screens.
Using images that overflow their containers.
Creating too many unnecessary breakpoints.
Testing only on desktop.
Using hover effects as the only way to reveal important content.
Making buttons too small for touch screens.
Forgetting that tables need special handling on mobile.
Using large images without responsive image techniques.

29. Practical Responsive Design Checklist

Add the viewport meta tag.
Use flexible containers: width: 90%, max-width, min(), max(), or clamp().
Use box-sizing: border-box.
Make images responsive.
Use Flexbox for one-dimensional layouts.
Use CSS Grid for two-dimensional layouts.
Use media queries when the whole page layout needs to change.
Use container queries when a component needs to adapt to its own available space.
Use readable font sizes.
Test the website on multiple screen widths.

30. Final Example: Mobile-First Responsive Website Structure

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

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

.container {
    width: min(92%, 1200px);
    margin-inline: auto;
}

.header {
    padding: 40px 0;
    text-align: center;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 700px) {
    .nav {
        flex-direction: row;
        justify-content: center;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .main {
        grid-template-columns: 2fr 1fr;
    }

    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

Conclusion

Responsive Web Design is a fundamental part of modern CSS. A good responsive website does not simply shrink desktop content. It reorganizes layout, typography, images, navigation, buttons, and components so that the user experience remains comfortable on every screen size.

The most important responsive CSS tools are the viewport meta tag, flexible widths, media queries, Flexbox, CSS Grid, responsive images, fluid typography, and container queries. If you understand how these tools work together, you can build websites that look professional on phones, tablets, laptops, and large desktop monitors.

CSS Responsive Web Design Tutorial

CSS Responsive Web Design Complete Tutorial

1. The Viewport Meta Tag

2. What Is the Viewport?

3. Fixed Layout vs Responsive Layout

4. CSS @media Rules Explained

Parts of a Media Query

5. Media Types

6. max-width Media Query

7. min-width Media Query

8. Combining Media Query Conditions

9. Comma in Media Queries

10. Orientation Media Queries

11. Mobile-First Responsive Design

12. Desktop-First Responsive Design

13. Common Breakpoints

14. Responsive Typography

Fluid Typography with clamp()

15. Responsive Images

Responsive Images with srcset

16. Responsive Navigation Menu

17. Responsive Layout with Flexbox

18. Responsive Layout with CSS Grid

19. Complete Responsive Page Example

20. Responsive Tables

21. Responsive Buttons

22. Media Queries for Hover and Touch Devices

23. prefers-color-scheme

24. prefers-reduced-motion

25. Container Queries

26. Media Queries vs Container Queries

27. Complete Responsive Card Grid

28. Common Responsive Design Mistakes

29. Practical Responsive Design Checklist

30. Final Example: Mobile-First Responsive Website Structure

Conclusion