Responsive Design

Make sites that work on every screen

CSS responsive design is about making your website look good on desktop, tablet, and mobile phones using CSS media queries, flexible layouts, and responsive sizing.

1Learn
2Practice
3Test
4Build

0 of 6 topics complete

0% Complete

0 Lessons done

0 Points

Lessons

Build layouts that adapt

Build

Put it together

Build a responsive card grid using CSS Grid and a media query. Resize the preview to watch the cards reflow.

Your code

Preview

Responsive Design

CSS responsive design

CSS responsive design is about making your website look good on desktop, tablet, and mobile phones using CSS media queries, flexible layouts, and responsive sizing.

Basic responsive CSS

/* Desktop — default styles */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tablet */
@media (max-width: 800px) {
    .container {
        width: 94%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .container {
        width: 96%;
    }

    h1 {
        font-size: 28px;
    }

    p {
        font-size: 15px;
    }
}

Common responsive breakpoints

Screen size	CSS media query	Typical device
Large desktop	`@media (min-width: 1200px)`	Desktop monitors
Tablet & small laptop	`@media (max-width: 800px)`	Tablets, small laptops
Mobile	`@media (max-width: 480px)`	Phones

Key techniques

Flexbox

Arrange navigation links, buttons, and content horizontally or vertically.

display: flex;

CSS Grid

Create responsive card layouts that automatically adjust to screen width.

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Media queries

Change font sizes, spacing, columns, and navigation when the screen gets smaller.

@media (max-width: 800px) { ... }