</>
ValidateHTML

CSS Media Query Syntax Error

Media queries have strict syntax rules. Each condition must be wrapped in parentheses, values need units, and the overall structure must follow @media type (condition) { rules }. A syntax error in a media query silently disables ALL rules inside it.

Find this error in your own code. Paste your CSS or enter a page URL, free and instant.Open the CSS validator
5.8%
of sites tested

How common is this error?

We ran this validator over the home page of the Tranco top 5,000 websites in August 2026. 155 of the 2,656 sites we could reach hit it. That makes it the 4th most common CSS problem we found, across 328 occurrences. See the full study.

Most frequent wording: Unknown at-rule `@if`

Why It Matters

A broken media query disables every rule inside it. Your responsive design fails completely for that breakpoint, but only on certain screen sizes, making it hard to catch during development on your primary device.

Common Causes

  • Leaving a feature condition outside parentheses, like max-width: 768px with no surrounding brackets.
  • Omitting the unit on a breakpoint value, writing 768 instead of 768px.
  • Forgetting a closing parenthesis when combining conditions with and.

Code Examples

Bad CSS
@media screen and max-width: 768px {  /* missing parentheses */
  .sidebar { display: none; }
}

@media (max-width: 768) {            /* missing unit */
  .nav { flex-direction: column; }
}

@media (min-width: 768px) and (max-width: 1024px  /* missing closing paren */
  .container { padding: 20px; }
}
Good CSS
@media screen and (max-width: 768px) {
  .sidebar { display: none; }
}

@media (max-width: 768px) {
  .nav { flex-direction: column; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding: 20px; }
}

How to Fix

  • 1Wrap each condition in parentheses: (max-width: 768px) not max-width: 768px.
  • 2Values need units: (max-width: 768px) not (max-width: 768).
  • 3Use modern syntax when possible: @media (width <= 768px) is cleaner.
  • 4Test responsive rules by resizing your browser, not just on your main screen size.

Frequently Asked Questions

Why does a media query error break all the rules inside it?
If the browser cannot parse the media condition, it discards the entire at-rule block. Every selector inside that breakpoint is lost, so the layout fails only at the screen sizes the query was meant to handle.
Do media feature values need units?
Yes. A width condition like max-width must use a length unit: 768px, not a bare 768. The only unitless media features are things like resolution counts and aspect-ratio fractions.
What is the modern range syntax for media queries?
Newer CSS lets you write comparisons directly, such as width less-than-or-equal-to 768px, instead of min-width and max-width pairs. It is cleaner and now widely supported, though the parenthesized form still works everywhere.

Check Your CSS Now

Our CSS validator detects this error automatically and shows the exact line number.

Open CSS Validator

Related CSS Errors

Unclosed CSS Bracket

An unclosed curly brace can break your entire stylesheet at once. Learn how a missing closing bracket cascades, and how to locate and fix it quickly.

Missing Unit on CSS Value

Learn why most CSS numeric values need a unit such as px, rem, or em, which properties accept unitless numbers, and how to fix missing-unit errors fast.

Invalid CSS Property Value

Learn why an invalid CSS property value silently breaks your styling, and how to fix the common color, unit, keyword, and function mistakes quickly.

View all CSS errors