CSS Media Query Not Working Fix: Causes and Fixes

Why is CSS Media Query Not Working?

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.

CSS media queries depend on the viewport presented by the browser. On mobile, a missing viewport meta tag can make the browser use a desktop-width layout viewport and scale it down, so expected breakpoints never become active.

Common Causes

Missing viewport meta tag in HTML head
Wrong media query syntax (missing parentheses, wrong keywords)
CSS specificity overriding media query styles
Media query placed before the styles it should override
Using wrong breakpoint values (px vs em)

Quick Fix (TL;DR)

Immediate Fix: Without this, mobile browsers ignore your breakpoints

<!-- ✅ Add this to your HTML <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Without this, mobile browsers ignore your breakpoints! -->

Common Scenarios & Solutions

Failure: No viewport meta mobile renders at 980px width

<!-- ❌ No viewport meta "" mobile renders at 980px width -->
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="style.css">
  <!-- Missing viewport meta! -->
</head>

Media Query Not Working Correction 1

<!-- ✅ 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>

Failure: Missing parentheses

/* ❌ Wrong syntax */
@media max-width: 768px { }        /* Missing parentheses! */
@media (max-width: 768) { }        /* Missing px unit! */
@media screen and max-width 768px { } /* Wrong syntax */

Media Query Not Working Correction 2

/* ✅ 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) { }

Correction: Base styles for mobile

/* ✅ 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; }
}

Failure: High specificity overrides media query

/* ❌ High specificity overrides media query */
#main .content p { font-size: 18px; } /* High specificity */

@media (max-width: 768px) {
  p { font-size: 14px; } /* ❌ Lower specificity "" ignored! */
}

Correction: Same specificity

/* ✅ Match specificity in media query */
@media (max-width: 768px) {
  #main .content p { font-size: 14px; } /* Same specificity */
}

Best Practices to Avoid This Error

Always include viewport meta tag - Required for responsive design on mobile
Use mobile-first approach - Base styles for mobile, min-width for larger screens
Keep specificity low - Use classes, not IDs, for easier overriding
Test in browser DevTools - Use responsive mode to test breakpoints
Use consistent breakpoints - Define breakpoints as CSS variables
Test on real devices - DevTools emulation isn't always accurate
Use logical operators correctly - and, not, only in media queries

CSS Media Query Not Working Fix CSS fallback case

.lesson-box:empty::before {
  content: "CSS Media Query Not Working Fix: add visible content";
}

Before you move on