CSS Media Queries: Syntax, Examples and How to Fix the Check

What Are CSS Media Queries?

A media query is the @media at-rule. The browser tests its condition continuously and switches the wrapped rules on or off as the window, device or user preference changes. Google Search Central recommends responsive design with the same HTML on every device. The MDN @media reference documents the full syntax.

A query lives either in an @media block inside a stylesheet or in the media attribute of a link element. A linked sheet that doesn't match still downloads, at lower priority and without blocking rendering, as our guide to render blocking resources explains.

Anatomy of an @media rule

A rule has an optional media type (it defaults to all), conditions in brackets, and a block of ordinary CSS.

/* media type: screen, condition: viewport at least 768px wide */
@media screen and (min-width: 768px) {
  .nav { display: flex; }
}

When the condition fails, the browser skips the block and the base styles stay in force. Current browsers also let you nest a query inside a style rule, next to its base styles.

.card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }

When a script needs the same answer, window.matchMedia runs the query from JavaScript.

Types, features and operators

The three types are all, screen and print. Each media feature in brackets tests one thing: width and height (with min-height and max-height), orientation (landscape or portrait), aspect-ratio, resolution, hover and pointer. The preference features prefers-color-scheme, prefers-reduced-motion, prefers-contrast and forced-colors come from Media Queries Level 5.

The logical operators are the and operator, the not operator and only, which hides a query from very old browsers. A comma separates queries and acts as or, and Media Queries Level 4 added a real or keyword plus range syntax such as (600px <= width < 1000px), the same test as a min-width and max-width pair but easier to read.

@media screen, print { body { color: #111; } }
@media (orientation: landscape) and (min-width: 600px) { .hero { height: 60vh; } }
@media not print { .nav { position: sticky; } }

The comma list applies when either query is true, and not flips the rest. Resolution targets sharp displays, hover and pointer separate a mouse from a touchscreen, and the media attribute on a link element applies the idea to a whole file.

<link rel="stylesheet" href="wide.css" media="(min-width: 768px)">

@media (min-resolution: 2dppx) { .logo { background-image: url(logo-2x.png); } }
@media (hover: hover) and (pointer: fine) { .menu a:hover { text-decoration: underline; } }

Min-width versus max-width

Min-width builds up: the base CSS serves the smallest screen and each query adds layout. Max-width strips down from a desktop base. Both limits are inclusive, so min-width: 768px and max-width: 768px both match a viewport exactly 768px wide. Range syntax with an exclusive upper bound avoids the clash.

How SEO Site Checker Tests CSS Media Queries

This check sits on the card titled Mobile Snapshot and Responsiveness, covered from the screenshot side in our mobile snapshot check guide. The test is a text scan, not a visual one.

Exact rule: the check passes when at least one of the first eight linked stylesheets contains the text @media, then optional spaces, then an opening bracket. Case is ignored. Anything else is a fail.

What the scanner reads

The report loads your page in headless Chromium and takes the rendered HTML, so stylesheet links that scripts have added by the time the page settles are generally part of the rendered HTML we read. It collects every link element whose rel includes stylesheet, keeps the first eight, and downloads each with a 3 second connect and read timeout inside a 10 second shared window. There is no warning state, and a page with no linked stylesheet fails.

What counts as pass or fail

One dark mode query turns the card green although it says nothing about layout.

Not tested: whether any query changes your layout, the viewport meta tag, inline style blocks, @import files, protocol relative links and the 430 px screenshot. A pass only proves the text exists in a linked stylesheet, and the scan reads raw text, so even a commented-out rule would count.

Cases that surprise people

• Inline CSS. Queries in a style block are never read, including the WordPress Additional CSS box. See the inline CSS guide for why.
• The @import rule. Styles pulled in through @import are not followed.
• The media attribute on a link. It is valid responsive CSS, but the scan reads only file contents.
• Protocol relative and relative links. An href such as //cdn.example.com/site.css is skipped, so write the full https:// address. Relative hrefs are joined to the site root, not the page's folder.
• The ninth stylesheet. Only the first eight files are downloaded, and a file that times out counts as no match.

The 430 px screenshot on the card has no effect on the result. The failed card says the page is not using CSS media queries, but the test is narrower than that: it only recognises the plain @media ( form in a linked file. A responsive site that writes every query as @media screen and (...), or keeps them in inline CSS, can therefore show red. One plain @media (min-width: ...) rule in a linked stylesheet is the whole remedy.

Test my CSS now

How to Add CSS Media Queries the Mobile First Way

1. Confirm the viewport tag. Without <meta name="viewport" content="width=device-width, initial-scale=1"> mobile browsers lay the page out at about 980 CSS pixels, so narrow queries never fire in responsive web design terms. Our meta viewport tag guide has the details.
2. Write base styles first. Style the smallest screen with no query: one column, full width images.
3. Add min-width queries where the layout strains. Widen the browser until something breaks.
4. Use the plain form. Write @media (min-width: 600px) instead of prefixing screen and. It behaves the same on screens, our scanner recognises it, and print rules belong in their own block.
5. Keep queries in a linked file. A .css file is scanned, while a style block or theme customizer box is not.
6. Run the report again. Clear caches first, then confirm the card is green.

.cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

CSS Media Query Examples and Common Breakpoints

These are the default breakpoints of two popular frameworks, both mobile first with min-width.

The web.dev media queries lesson argues for content based breakpoints: add one where a line of text grows too long, not where a device model ends.

@media (min-width: 48em) { .layout { display: grid; } }
@media (600px <= width < 900px) { .sidebar { float: none; width: auto; } }
@media print { .site-nav { display: none; } }

The first query uses em units on purpose. Em values follow the browser's default font size, so a visitor who raised that setting keeps the single column layout until the window is wide enough for the larger text. Container queries suit component level layout better.

Why Your CSS Media Queries Are Not Working

• No viewport tag. A phone reporting 980 px never matches max-width: 640px. Add the tag from the meta viewport tag guide.
• Wrong order. A query above the rule it overrides loses on source order, so place queries after the rules they change.
• Syntax slips. The text and(min-width: 600px) is invalid because and needs a space before the bracket, and a bare 768 without px breaks it too.
• Queries in the wrong place. Browsers apply them, but see the report section above: inline blocks are skipped.
• Too many or slow files. Anything past the eighth link, or a file that times out, goes unread.
• Test that the query fires. Put a red outline inside the query, then drag the width across the breakpoint in DevTools.

CSS Media Query Best Practices

• Design mobile first. With min-width queries the base CSS is the small screen layout and each query only adds to it, so there is less to override and undo and the stylesheet is easier to maintain. The whole file still downloads on every device.
• Keep content identical. Googlebot smartphone indexes the mobile version, so content found only on desktop may never be indexed, as the Google mobile-first indexing guidance explains. Rearrange content with queries, never remove it.
• Prefer fluid techniques. Wrapping flexbox rows, auto-fit grid columns and clamp() for type reflow on their own, so you write a query only where the design changes shape.
• Minify when finished. Follow our CSS minification guide once the queries settle.