Advanced Responsive Design and Container Queries

Introduction to Advanced Responsive Web Design

Responsive web design allows a website to adapt to different devices and screen sizes.

Traditional responsive design often relies heavily on media queries that respond to the size of the browser viewport.

Modern CSS provides additional tools that allow individual components to respond to the space available to them. One of the most important of these technologies is the CSS Container Query.

Container queries make responsive components more reusable because a component can respond to the size of its own container instead of depending entirely on the browser window.

What Is Responsive Design?

Responsive design is an approach to building websites that work effectively across different screen sizes and devices.

A responsive interface should remain usable on:

• Mobile phones
• Tablets
• Laptops
• Desktop computers
• Large displays

Responsive design involves more than simply shrinking a desktop webpage. The layout, typography, spacing, navigation and components may all need to adapt.

Mobile-First Design

Mobile-first development starts by designing the interface for smaller screens and then progressively enhancing it for larger screens.

Example:

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

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

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

The base style handles mobile devices while larger layouts are introduced using progressively larger breakpoints.

Why Mobile-First?

Mobile-first development encourages developers to prioritize the most important content.

It can also produce cleaner CSS because the basic layout is established first and enhancements are added as more space becomes available.

Responsive Units

CSS provides several units that are useful for responsive design.

Percentage (%)

.container {
    width: 90%;
}

Percentages are relative to the size of a relevant containing element.

REM

The rem unit is relative to the root font size.

h1 {
    font-size: 2rem;
}

Using rem for typography and spacing can make a design more consistent and scalable.

EM

The em unit is generally relative to the font size of the element or its parent, depending on the property.

.card {
    padding: 1.5em;
}

VW and VH

vw represents a percentage of the viewport width while vh represents a percentage of the viewport height.

.hero {
    min-height: 80vh;
}

CH

The ch unit is based approximately on the width of the zero character in the current font.

It can be useful for controlling readable text widths.

.article-content {
    max-width: 70ch;
}

Fluid Typography

Instead of using completely separate font sizes at different breakpoints, CSS can create fluid typography.

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

The first value is the minimum, the middle value is the preferred flexible value and the final value is the maximum.

Using clamp()

The clamp() function has the following structure:

clamp(minimum, preferred, maximum)

For example:

.hero-title {
    font-size: clamp(2rem, 6vw, 5rem);
}

This allows the heading to scale smoothly without becoming too small or too large.

Using min()

The min() function chooses the smallest available value.

.container {
    width: min(1100px, 92%);
}

This means the container can use 92% of the available width but will not exceed 1100px.

Using max()

The max() function chooses the largest value.

.section {
    padding-inline: max(20px, 5vw);
}

This can provide a minimum amount of spacing while allowing spacing to increase on larger screens.

Traditional Media Queries

Media queries respond to conditions such as viewport width.

@media (max-width: 768px) {
    .navigation {
        display: none;
    }
}

Media queries are still extremely useful and remain an important part of responsive development.

The Problem with Viewport-Only Responsiveness

Consider a reusable course card component.

The card might appear in:

• A three-column desktop grid.
• A sidebar.
• A modal window.
• A dashboard panel.
• A full-width mobile layout.

The viewport could be very wide while the actual card container is narrow.

A viewport media query does not always provide enough information about the space available to the component.

What Are Container Queries?

Container queries allow a component to respond to the size of its containing element.

Instead of asking:

How wide is the browser window?

The component can effectively ask:

How much space is available inside my container?

Defining a Container

First, define an element as a query container.

.course-area {
    container-type: inline-size;
}

Now child components can respond to the inline size of that container.

Using a Container Query

@container (min-width: 500px) {
    .course-card {
        display: grid;
        grid-template-columns: 180px 1fr;
    }
}

When the container becomes at least 500px wide, the card changes its layout.

Container Names

Containers can also be given names.

.course-area {
    container-type: inline-size;
    container-name: courses;
}

The named container can then be targeted:

@container courses (min-width: 600px) {
    .course-card {
        grid-template-columns: 200px 1fr;
    }
}

Shorthand Container Syntax

The container properties can be combined.

.course-area {
    container: courses / inline-size;
}

Container Query Units

Modern CSS also provides units based on the size of the query container.

• cqw — 1% of the container’s width.
• cqh — 1% of the container’s height.
• cqi — 1% of the container’s inline size.
• cqb — 1% of the container’s block size.
• cqmin — smaller of the container’s relevant dimensions.
• cqmax — larger of the container’s relevant dimensions.

Responsive Course Card Example

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

.course-card {
    display: block;
    padding: 20px;
}

@container (min-width: 600px) {
    .course-card {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 24px;
    }
}

The course card can now adapt to its container rather than depending entirely on the viewport.

Container Queries vs Media Queries

Combining Media and Container Queries

There is no requirement to choose only one approach.

A professional website can use media queries for global layout and container queries for individual components.

.dashboard {
    display: grid;
    grid-template-columns: 1fr;
}

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

.dashboard-widget {
    container-type: inline-size;
}

@container (min-width: 450px) {
    .dashboard-widget {
        display: grid;
        grid-template-columns: 120px 1fr;
    }
}

Responsive Navigation

Navigation is usually controlled at the viewport level because it is part of the overall page structure.

.navigation {
    display: flex;
    gap: 24px;
}

@media (max-width: 700px) {
    .navigation {
        display: none;
    }

    .menu-toggle {
        display: block;
    }
}

Responsive Images

Images should adapt to their available space.

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

For card images, object-fit can maintain consistent visual proportions.

.course-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Responsive Grid

CSS Grid can create flexible layouts without requiring many breakpoints.

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

This approach allows the browser to automatically determine how many columns can fit.

Responsive Flexbox

Flexbox can also adapt naturally.

.course-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

When there is insufficient space, items can move to another line.

Responsive Spacing

Spacing can also become fluid.

.section {
    padding-block: clamp(40px, 8vw, 100px);
}

This avoids creating many breakpoint-specific spacing rules.

Responsive Text Width

Long lines of text can become difficult to read on large screens.

.content {
    max-width: 70ch;
}

Controlling line length improves readability.

Accessibility and Responsive Design

Responsive design should never hide important information simply because the screen is small.

Developers should ensure:

• Text remains readable.
• Interactive controls remain accessible.
• Buttons have sufficient space.
• Keyboard navigation continues to work.
• Content remains available across screen sizes.
• Zooming does not break the interface.

Testing Responsive Websites

Responsive websites should be tested at different sizes.

Useful test sizes include:

• Small mobile screens
• Large mobile screens
• Tablet portrait
• Tablet landscape
• Laptop
• Desktop
• Large desktop displays

Developers should also resize the browser manually to discover unexpected layout problems.

Modern Responsive Design Strategy

A strong responsive strategy can follow these principles:

1. Start with a mobile-friendly base layout.
2. Use flexible units instead of fixed dimensions where appropriate.
3. Use CSS Grid and Flexbox for flexible layouts.
4. Use min(), max() and clamp() for fluid values.
5. Use media queries for page-level responsive behavior.
6. Use container queries for reusable components.
7. Use responsive images.
8. Test real components at different sizes.
9. Maintain accessibility at every breakpoint.

Complete Practical Example

:root {
    --primary: #2563eb;
    --surface: #ffffff;
    --background: #f8fafc;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Arial, sans-serif;
}

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

.page-title {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    margin-block: 50px 30px;
}

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

.course-wrapper {
    container: course / inline-size;
}

.course-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.course-card__content {
    padding: 24px;
}

.course-card__title {
    margin-top: 0;
    font-size: 1.4rem;
}

.course-card__description {
    color: var(--muted);
    line-height: 1.6;
}

.course-card__button {
    display: inline-flex;
    padding: 12px 18px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

@container course (min-width: 500px) {
    .course-card {
        display: grid;
        grid-template-columns: 160px 1fr;
    }

    .course-card__content {
        padding: 20px;
    }
}

@container course (min-width: 750px) {
    .course-card {
        grid-template-columns: 220px 1fr;
    }

    .course-card__title {
        font-size: 1.7rem;
    }
}

@media (max-width: 600px) {
    .page-container {
        width: 94%;
    }
}

Practice Exercise

Build a responsive Dwallnet course dashboard containing at least six course cards.

Your dashboard should:

1. Use CSS Grid for the main course layout.
2. Use auto-fit and minmax() where appropriate.
3. Use clamp() for the main heading.
4. Use CSS variables for colors and spacing.
5. Use mobile-first styling.
6. Use at least two media queries.
7. Define each course section as a container.
8. Use at least one container query.
9. Make the course cards change layout when their container becomes wider.
10. Ensure buttons remain usable on mobile devices.
11. Test the dashboard at several screen sizes.

Lesson Summary

Responsive web development has evolved beyond simply creating media queries for different screen widths.

Modern CSS provides flexible units, fluid functions, CSS Grid, Flexbox and container queries that allow interfaces to adapt naturally.

Media queries remain valuable for page-level layout decisions, while container queries are especially useful for reusable components.

By combining mobile-first design, fluid sizing, flexible layouts and component-level responsiveness, developers can create interfaces that remain useful across a wide range of devices and layouts.