CSS Media Queries

Media queries allow CSS to apply different styles based on the characteristics of the device or screen viewing the page. This is the foundation of responsive web design — the practice of building web pages that look good on all screen sizes, from wide desktop monitors to narrow mobile phones.

Without media queries, a website designed for a large desktop screen would look broken and cramped on a mobile phone. Media queries let styles be adjusted depending on the screen width, height, orientation, and more.

Basic Syntax

@media media-type and (condition) {
    /* CSS rules that apply when the condition is true */
}

@media — The keyword that starts a media query.
media-type — Optional. Specifies what type of device (screen, print, all). Defaults to all.
condition — A rule like max-width: 768px that must be true for the styles to apply.

Simple Example

/* Default styles for all screens */
body {
    font-size: 18px;
    background-color: white;
}

/* On screens 768px or narrower (tablets and phones) */
@media screen and (max-width: 768px) {
    body {
        font-size: 15px;
        background-color: #f9f9f9;
    }
}

On screens wider than 768px, the font size is 18px. On screens 768px or narrower, it becomes 15px.

Common Breakpoints

A breakpoint is the screen width at which the layout changes. These are widely used industry standard breakpoints:

Breakpoint	Target Device
`max-width: 480px`	Small mobile phones
`max-width: 768px`	Tablets and large phones
`max-width: 1024px`	Small laptops and iPad landscape
`min-width: 1200px`	Large desktop monitors

max-width vs min-width

max-width (Mobile-first approach)

Styles inside this query apply when the screen is at most the specified width — targeting smaller screens.

@media (max-width: 768px) {
    /* Styles for screens 768px and SMALLER */
    .nav-menu {
        display: none;  /* Hide desktop nav on mobile */
    }
}

min-width (Desktop-first approach)

Styles inside this query apply when the screen is at least the specified width — targeting larger screens.

@media (min-width: 1024px) {
    /* Styles for screens 1024px and WIDER */
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Responsive Navigation Example

/* Desktop navigation — horizontal */
nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* Mobile navigation — vertical stacked */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 0;
        background-color: #1a1a2e;
    }

    nav ul li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #333;
    }
}

Responsive Layout with Grid

/* Desktop: 3 columns */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

Combining Conditions

Multiple conditions can be combined using and, or (comma), and not.

/* Applies when screen is between 480px and 768px */
@media (min-width: 480px) and (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

/* Applies to both screens narrower than 480px OR screens in landscape orientation */
@media (max-width: 480px), (orientation: landscape) {
    .hero-image {
        height: 200px;
    }
}

Orientation Media Query

@media (orientation: portrait) {
    /* Styles for phones/tablets held vertically */
    .hero {
        height: 50vh;
    }
}

@media (orientation: landscape) {
    /* Styles for phones/tablets held horizontally */
    .hero {
        height: 80vh;
    }
}

Print Media Query

Styles can also be tailored for printing a page.

@media print {
    nav, footer, .ads {
        display: none;  /* Hide non-essential elements when printing */
    }

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

Viewport Meta Tag

For media queries to work correctly on mobile devices, the viewport meta tag must be included in the HTML <head>. Without it, mobile browsers zoom out to display the desktop layout.

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

Summary

Media queries use the @media rule to apply different CSS based on screen size or device characteristics. max-width targets smaller screens (mobile-first is recommended). min-width targets larger screens. Breakpoints at 480px, 768px, and 1024px cover the most common device sizes. Combining media queries with Flexbox or Grid creates fully responsive layouts that adapt gracefully from mobile phones to large desktops. Always include the viewport meta tag in HTML to activate responsive behavior on mobile devices.

Previous lessons

Back to courses