Responsive Fix

Why is my media query not working even though the CSS looks right?

If your mobile styles are not applying, your breakpoint seems ignored, or your layout stays stuck in desktop mode, the browser is usually not being random. The real problem is usually a missing viewport tag, invalid syntax, CSS specificity conflicts, wrong rule order, a typo, or a layout issue that makes the media query look broken.

Browse Responsive Fixes See the Difference

Classic responsive bug
Usually a setup or cascade issue
Often fixed fast once diagnosed

Quick diagnosis

Why is my media query not working? In most real projects, the answer is not “CSS is broken.” It is usually one of a handful of predictable mistakes.

The viewport tag is missing Mobile browsers may render the page in a scaled desktop mode if the correct viewport meta tag is not present.

The media query syntax is invalid A small syntax mistake can stop the browser from reading the rule the way you expect.

Your media query is being overridden The rule may be firing, but another selector with stronger specificity or later order is winning.

The breakpoint logic is wrong You may be using max-width when the layout needs min-width, or targeting the wrong width entirely.

The bug is just a typo One misspelled property, selector, or unit can make the whole thing feel “dead.”

The media query works, but the layout is still rigid Sometimes the real problem is a fixed width, long content, or overflowing child that makes responsive behavior look broken.

What the bug looks like

The breakpoint seems ignored, mobile styles never appear, columns stay stuck in desktop mode, or the page still looks broken after the media query should have fired.

Why it happens

Media query bugs are usually caused by setup mistakes, invalid conditions, CSS conflicts, or layout assumptions that were never truly responsive to begin with.

What usually fixes it

Check the viewport tag, verify syntax, inspect rule order and specificity, then confirm the layout itself is actually flexible at that breakpoint.

Recommended baseline

Safe starting point

Start with the correct viewport tag, a clean media query, and a layout that actually has something flexible to change.

<meta name="viewport" content="width=device-width, initial-scale=1">

.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  min-width: 0;
}

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

1. The viewport tag is missing

This is one of the most common answers to the question: why is my media query not working on mobile? Without the correct viewport tag, mobile browsers can pretend the page is desktop-sized and then scale it down visually.

That means your CSS may technically exist, but the browser is not rendering the page in a true mobile viewport.

Correct viewport tag

Required for real mobile behavior

<meta name="viewport" content="width=device-width, initial-scale=1">

Broken syntax example

Tiny mistake, big confusion

@media screen and(max-width: 768px) {
  .menu {
    display: none;
  }
}

2. Your media query syntax is invalid

Media query syntax is not forgiving. Missing spaces, malformed conditions, wrong punctuation, or invalid grouping can make the browser ignore the rule or interpret it differently than you expect.

The example above is broken because the spacing around and is wrong. Small errors like this waste hours because the CSS “looks almost right.”

Correct syntax

Readable and valid

@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

3. Your media query is being overridden

Sometimes the media query does work, but another rule with stronger specificity or later placement wins the cascade. This is one of the biggest reasons developers think the breakpoint is broken when the real problem is CSS order.

If your mobile rule appears first and the desktop rule appears later with equal or stronger specificity, the later rule can wipe out the mobile style.

Common override problem

Rule order conflict

@media (max-width: 768px) {
  .card-title {
    font-size: 18px;
  }
}

.card-title {
  font-size: 28px;
}

Safer order

Desktop first example

.card-title {
  font-size: 28px;
}

@media (max-width: 768px) {
  .card-title {
    font-size: 18px;
  }
}

4. Your breakpoint logic is fighting your layout

A media query can be perfectly valid and still feel wrong if the logic behind it does not match the layout. Using the wrong breakpoint value, confusing min-width and max-width, or following no clear mobile-first or desktop-first logic creates confusion fast.

The rule may fire exactly when asked, but still fail to solve the real layout problem.

5. The bug is just a typo

Misspelling max-width, using the wrong class name, forgetting a closing brace, or writing the wrong selector is painfully common.

6. The media query works, but the layout is still rigid

One fixed-width container, oversized image, code block, or long string can make the whole page look non-responsive even when the media query actually fires.

The CSS file may not be updating

Browser cache, plugin cache, build issues, or stale compiled files can make you think your latest media query changes are not applying.

Fast practical rule

If your media query is not working, do not start by changing random breakpoint numbers. First confirm the viewport tag exists, then inspect syntax, then check whether another rule is winning the cascade.

Debug checklist

Confirm the page includes <meta name="viewport" content="width=device-width, initial-scale=1">.
Check the media query syntax carefully for spacing, braces, and valid conditions.
Inspect whether the selector inside the media query is being overridden by another rule later in the cascade.
Verify whether the breakpoint should use max-width or min-width.
Look for typos in property names, selectors, units, or class names.
Use DevTools to confirm whether the media query is firing and whether one child element is still breaking the layout.
Clear cache if you suspect the browser or platform is showing stale CSS.

Best first move Open DevTools, resize the viewport, and confirm whether the media query is actually activating before changing any code.

Most overlooked cause The viewport tag is missing, so the browser never behaves like a true mobile viewport in the first place.

Most frustrating cause The media query works, but another CSS rule later in the file silently overrides it.

Better mindset A media query is only part of responsive design. If the layout itself stays rigid, the breakpoint alone cannot save it.

Example of a layout that still feels broken

Even if the media query fires, a rigid container or overflowing child can keep the page feeling stuck in desktop mode. This is where many people wrongly conclude that the media query itself is dead.

Still rigid on mobile

Breakpoint fires, bug remains

.wrapper {
  width: 1200px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Final takeaway

Why is my media query not working? In most cases, the media query is not the villain. The real issue is usually missing viewport setup, invalid syntax, CSS order conflicts, incorrect breakpoint logic, a typo, or a rigid layout that still refuses to adapt.

Fix the real cause instead of guessing new breakpoint values, and responsive debugging becomes much faster and much less frustrating.

Want more fixes like this?

Browse more responsive debugging guides or jump to the full FrontFixer library.

Responsive Fixes All Fixes

Why Is My Media Query Not Working?