Warning CSS Media Queries — Syntax, Examples & Breakpoints

How CSS @media queries work, common breakpoints and features like min-width and prefers-color-scheme, and why a malformed one fails silently.

A media query is a CSS condition — written as @media (condition) { ...rules... } — that only applies its rules when the condition is true: the viewport is at least a certain width, the device is in landscape orientation, the user prefers dark mode, and so on. It's the core mechanism behind responsive design.

Common media features

Feature	Matches when...
`min-width` / `max-width`	The viewport is at least / at most a given width — the basis of most responsive breakpoints.
`orientation`	The viewport is `portrait` or `landscape`.
`prefers-color-scheme`	The user has requested `dark` or `light` mode at the OS level.
`prefers-reduced-motion`	The user has asked the system to minimize animation, via `reduce`.
`hover`	The primary input can hover over elements — `hover: hover` is generally true on desktop, false on touchscreens.
`print`	Used as a media type rather than a feature — `@media print` targets printed output.

Combining conditions

/* AND — both must be true */
@media (min-width: 768px) and (orientation: landscape) { ... }

/* OR — a comma separates alternatives, either can be true */
@media (min-width: 1200px), print { ... }

/* NOT — negates the whole query */
@media not screen { ... }

Common responsive breakpoints

/* Mobile-first: base styles apply to all sizes, then override upward */
.container { padding: 1rem; }

@media (min-width: 640px)  { .container { padding: 1.5rem; } } /* small tablets */
@media (min-width: 1024px) { .container { padding: 2rem; } }   /* desktop */

There's no universal standard set of breakpoints — these are common, round starting points, not hard requirements. Pick breakpoints based on where your own content actually starts looking cramped or overly spread out, not a fixed device-width chart.

Malformed @media queries — what the validator checks

The validator flags an @media rule whose condition (the part between @media and the opening {) is either empty or has unbalanced parentheses.

/* Wrong: missing closing paren */
@media (min-width: 768px { .sidebar { display: block; } }

/* Wrong: no condition at all */
@media { .sidebar { display: block; } }

/* Right */
@media (min-width: 768px) { .sidebar { display: block; } }

CSS parsers don't partially apply a malformed at-rule — an @media block with a condition that fails to parse is discarded in its entirety, including every rule nested inside it. That's a much quieter failure than a normal typo elsewhere in a stylesheet: there's no invalid property or bad selector to spot, just a chunk of otherwise-correct CSS that never takes effect at all, because the condition wrapping it doesn't parse. A missing parenthesis from editing a media query by hand is the most common cause.

Frequently asked questions

What's the difference between min-width and max-width in a media query?

min-width matches when the viewport is at least that wide — the standard basis for "mobile-first" design, where base styles target small screens and min-width queries add complexity as space allows. max-width matches when the viewport is at most that wide — used in "desktop-first" design, where base styles target large screens and max-width queries scale things down.

Does @media with no condition ever make sense?

No — @media always needs at least one media feature or type. If you want a rule to apply unconditionally, don't wrap it in @media at all.

Does this check validate the actual media features (like min-width) are spelled correctly?

No — it only checks that the parentheses in the condition balance and that a condition is present. A misspelled feature name (min-widht) would still pass this specific check, though it would similarly fail to match and silently do nothing.