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.
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.
Code Examples
@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; }
}@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.
Check Your CSS Now
Our CSS validator detects this error automatically and shows the exact line number.
Open CSS ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated CSS on reliable hosting.
Related CSS Errors
Unclosed CSS Bracket
How unclosed curly braces break your entire stylesheet. Find and fix missing closing brackets.
Missing Unit on CSS Value
Why CSS values need units and when they don't. Fix missing px, rem, em, and other unit errors.
Invalid CSS Property Value
Learn why CSS property values are invalid and how to fix them. Common mistakes with colors, units, and keywords.