H12 - Media Queries and Responsive Layout

01 - Why responsive design?

Websites are viewed on large screens, laptops, tablets and phones. A layout that works on a wide screen can become too cramped on a small screen.

On desktop you can place columns next to each other.
On phones you usually stack sections below each other.
Media queries apply CSS only under certain screen conditions.

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

02 - What is a media query?

A media query is a condition in CSS. The rules inside it are used only when the condition matches.

@media (max-width: 700px) {
    body {
        font-size: 18px;
    }
}

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

03 - Desktop first or mobile first?

Desktop first: write the wide layout first, then adjust for smaller screens.
Mobile first: write the small layout first, then add layout for larger screens.
Both approaches work. Choose one and stay consistent.

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

04 - The Holy Grail layout

The Holy Grail layout is a classic web layout with a header, navigation, main content, sidebar and footer. We build it with CSS Grid and named areas.

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

05 - HTML for the layout

<div class="page">
    <header>Header</header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main>Main content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</div>

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

06 - Giving grid-area names

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

07 - Desktop layout with Grid

.page {
    min-height: 100vh;
    display: grid;
    gap: 1rem;
    grid-template-columns: 220px 1fr 260px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
}

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

08 - Making the layout responsive

On smaller screens, stack the areas below each other.

@media (max-width: 800px) {
    .page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

09 - Complete example

body {
    margin: 0;
    background: #888888 url("background.jpg") center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
}

.page {
    min-height: 100vh;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    grid-template-columns: 220px 1fr 260px;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
}

nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

@media (max-width: 800px) {
    .page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }

    nav ul {
        flex-direction: column;
    }
}

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

10 - Best practices

Test your site at several screen widths.
Do not hide important content on mobile.
Keep navigation easy to use.
Use media queries for layout changes, not for every tiny detail.

Practice

Apply this concept in your responsive final layout.
Make the browser window smaller and check what changes.

11 - Final assignment

Practice

Build a Holy Grail layout with CSS Grid.
Make the layout responsive with media queries.
Use a body background with a fallback color and background-size: cover.
Use a ul navigation menu styled with flexbox.
Add real content blocks in the main content area.
Check your HTML and CSS with the W3C validators.

Quiz