When a media query does not work, the problem is often outside the query itself. Missing viewport meta tags, source order, selector specificity, invalid syntax, and wrong breakpoint assumptions are more common than browser failure.
Debug media queries by confirming the viewport width, checking whether the query condition is currently true, and then inspecting whether a stronger or later CSS rule overrides the expected responsive declaration.
A reliable workflow is to temporarily add a visible test rule inside the media query, such as changing the body background or adding an outline to the component. If the test rule appears, the query is active and the original issue is probably specificity or a conflicting property. If it does not appear, inspect the viewport width, syntax, and stylesheet loading order.
Add one worked example that compares the normal path with the boundary case for CSS Media Query Not Working Fix.
Keep the note tied to a real CSS workflow so the idea is easier to recall later.
CSS media queries are essential for responsive design, but they have specific requirements. The most common reason media queries don't work on mobile is a missing viewport meta tag in the HTML. Without it, mobile browsers render the page at desktop width and scale it down, making breakpoints ineffective.
<!-- ✅ Add this to your HTML <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Without this, mobile browsers ignore your breakpoints! --><!-- ❌ No viewport meta "" mobile renders at 980px width -->
<head>
<title>My Site</title>
<link rel="stylesheet" href="style.css">
<!-- Missing viewport meta! -->
</head><!-- ✅ Add viewport meta tag -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
<link rel="stylesheet" href="style.css">
</head>/* ❌ Wrong syntax */
@media max-width: 768px { } /* Missing parentheses! */
@media (max-width: 768) { } /* Missing px unit! */
@media screen and max-width 768px { } /* Wrong syntax *//* ✅ Correct syntax */
@media (max-width: 768px) { }
@media screen and (max-width: 768px) { }
@media (min-width: 768px) and (max-width: 1024px) { }
/* ✅ Modern range syntax (CSS Media Queries Level 4) */
@media (width <= 768px) { }
@media (768px <= width <= 1024px) { }/* ✅ Mobile-first (recommended) "" use min-width */
/* Base styles for mobile */
.container { padding: 16px; }
/* Override for larger screens */
@media (min-width: 768px) {
.container { padding: 32px; }
}
@media (min-width: 1024px) {
.container { padding: 48px; }
}
/* ✅ Desktop-first "" use max-width */
/* Base styles for desktop */
.container { padding: 48px; }
/* Override for smaller screens */
@media (max-width: 1024px) {
.container { padding: 32px; }
}
@media (max-width: 768px) {
.container { padding: 16px; }
}/* ❌ High specificity overrides media query */
#main .content p { font-size: 18px; } /* High specificity */
@media (max-width: 768px) {
p { font-size: 14px; } /* ❌ Lower specificity "" ignored! */
}/* ✅ Match specificity in media query */
@media (max-width: 768px) {
#main .content p { font-size: 14px; } /* Same specificity */
}CSS Media Query Not Working Fix matters in CSS because it changes how a program is written, tested, or debugged. The page should explain the normal flow first: what the developer writes, what the runtime or platform does, and what result should appear.
When teaching CSS Media Query Not Working Fix, avoid stopping at syntax. Show the surrounding decision: why this feature is chosen, what problem it removes, and what would become harder if the feature were not used.
The strongest notes for CSS Media Query Not Working Fix explain where the idea stops working. Add cases for missing input, wrong order, incompatible types, duplicate values, empty collections, failed requests, or configuration mismatch when those cases fit the lesson.
Readers should leave the page knowing how to inspect a bad result. For CSS Media Query Not Working Fix, that means checking the relevant value, state, dependency, selector, query, route, class, or runtime message before changing code randomly.
.lesson-box {
display: block;
max-width: 42rem;
padding: 1rem;
}.lesson-box:empty::before {
content: "CSS Media Query Not Working Fix: add visible content";
}Memorizing CSS Media Query Not Working Fix without the situation where it is useful.
Connect CSS Media Query Not Working Fix to a concrete CSS task.
Testing CSS Media Query Not Working Fix only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Changing code before reading the visible symptom or error message.
Inspect the output, state, configuration, or stack trace connected to CSS Media Query Not Working Fix.
Memorizing CSS Media Query Not Working Fix without the situation where it is useful.
Connect CSS Media Query Not Working Fix to a concrete CSS task.
The most common cause is a missing viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to your HTML head.
Mobile-first means writing base CSS for mobile screens, then using min-width media queries to add styles for larger screens. It's recommended because it results in smaller CSS for mobile users.
Common breakpoints: 480px (small mobile), 768px (tablet), 1024px (desktop), 1280px (large desktop). Use what makes sense for your content, not arbitrary device sizes.
Check for: missing viewport meta tag, syntax errors (missing parentheses or units), CSS specificity issues where other rules override the media query, or the media query placed before the styles it should override.
Not directly, but you can change CSS variable values inside media queries: @media (max-width: 768px) { :root { --spacing: 16px; } }. This is a powerful pattern for responsive design.
Explore 500+ free tutorials across 20+ languages and frameworks.