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 */
}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.