WebGlow Knowledge Centre

Media queries not applying can break your website’s responsive design. Learn the real reasons and fixes.

Common issues include viewport settings, incorrect selectors, CSS specificity, or syntax mistakes. Below are 9 fixes with examples you can copy directly.

1️⃣ Missing Meta Viewport Tag

Fix:

2️⃣ Incorrect Media Query Syntax

/* ❌ wrong: missing parentheses */
@media max-width: 768px {
  .container { width: 100%; }
}
        

Fix:

@media (max-width: 768px) {
  .container { width: 100%; }
}
        

3️⃣ Selector Specificity Issues

.container { width: 50%; }
@media (max-width: 768px) {
  .container { width: 100%; } /* ❌ overridden by more specific rule */
}
        

Fix:

body .container { width: 100%; }
        

4️⃣ Inline Styles Overriding Media Queries

Remove inline styles; use CSS instead.

5️⃣ CSS File Not Linked or Cached

Ensure exists. Clear browser cache or add version query: style.css?v=1.1.

6️⃣ Breakpoint Conflicts

Overlapping breakpoints can override each other. Order matters for multiple queries.

7️⃣ Missing Units

.container { max-width: 768; } /* ❌ missing px */
.container { max-width: 768px; } /* ✅ correct */
        

8️⃣ Incorrect Property Names

Misspelled or unsupported CSS properties may prevent media queries from working.

9️⃣ Testing on Wrong Screen Size

Use DevTools device toolbar or real devices — physical screens may scale differently.

Full Working Example

HTML

CSS (style.css)

.container {
  width: 800px;
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    background-color: #2ecc71;
  }
}
        

Extra Tips

• Always include .
• Test on multiple devices or DevTools simulators.
• Keep breakpoints consistent and logical.
• Avoid inline styles that override media queries.

Download Templates

Practice responsive fixes with real templates:

Download Free HTML Templates