CSS Media Query Not Working — Fix (2026) | Tutorials Logic

Why is CSS Media Query Not Working?

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.

Common Symptoms:
Mobile layout not applying • Breakpoints not triggering • Desktop styles showing on mobile

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)

Quick Solution

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

Scenario 1: Missing Viewport Meta Tag

Problem

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

Solution

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

Scenario 2: Wrong Media Query Syntax

Problem

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

Solution

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

Scenario 3: Mobile-First vs Desktop-First

Solution

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

Scenario 4: Specificity Override

Problem

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

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

Solution

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

Related Issues

Key Takeaways

The viewport meta tag is required for media queries to work on mobile devices
Media query syntax requires parentheses: @media (max-width: 768px) not @media max-width: 768px
Mobile-first approach uses min-width breakpoints and is recommended for performance
CSS specificity can override media query styles — match specificity in your media queries
Test responsive layouts in browser DevTools responsive mode and on real devices
Use consistent breakpoints defined as CSS variables for maintainable responsive design