Responsive Design and Media Queries

Responsive design ensures a page looks and works well across phones, tablets, and desktops, primarily using flexible layouts and media queries that adapt styles to screen size.

Media Queries

A media query applies a block of CSS only when a condition — usually viewport width — is met. This is the primary tool for adapting layouts across screen sizes.

.container {
    padding: 16px;
}

@media (min-width: 768px) {
    .container {
        padding: 32px;
        max-width: 900px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

Mobile-First vs Desktop-First

Mobile-first design writes base styles for small screens, then uses min-width media queries to add complexity for larger screens. This tends to produce simpler, more performant CSS than starting with a complex desktop layout and trying to strip it down for mobile.

Common Mistakes

• Forgetting the viewport meta tag in the HTML head, which causes mobile browsers to render at a zoomed-out desktop width.
• Writing desktop styles first and overriding everything with max-width media queries, resulting in bloated, conflicting CSS.
• Choosing breakpoints based on specific devices instead of where your own content actually starts to break.
• Using fixed pixel widths for containers instead of percentages or max-width, preventing content from shrinking on small screens.