Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
When @media screen appears to do nothing, either the query does not match the current viewport or a matching rule is losing in the CSS cascade. Test the query with one obvious declaration, verify the mobile viewport, then inspect selectors, declarations, breakpoints and rule order.
What @media screen actually tests
A media query is a condition. CSS inside it applies only when every required media type and feature matches. The screen type identifies screen output, but a width test such as (max-width: 600px) may be the part that fails.
@media screen and (max-width: 600px) {
body { background: yellow; }
}This example matches a screen viewport at or below 600 CSS pixels. The number is only an example; choose breakpoints from the space your layout needs, not from a device name.
First prove whether the query matches
- Add one unmistakable test. Temporarily change a visible property such as
background,outlineorfont-sizeinside the query. - Resize the browser or open its responsive design/inspection tool. Watch the reported viewport width, not the physical screen’s resolution.
- Check just below, at and just above the breakpoint. This shows whether the condition changes where you expect.
- Inspect the element. Developer tools can show which media queries match and which declarations are active or crossed out.
If the test declaration never appears, troubleshoot the query and viewport. If it appears but the intended design does not change, troubleshoot the selector, declaration or cascade.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Check syntax, operators and breakpoint logic
Parentheses, units and operators must be valid. These common forms have different logic:
| Form | Meaning |
|---|---|
@media (max-width: 600px) |
Matches widths at or below 600px. |
@media (min-width: 601px) |
Matches widths at or above 601px. |
@media screen and (max-width: 600px) |
Requires both screen output and a viewport no wider than 600px. |
@media (min-width: 400px) and (max-width: 800px) |
Requires both width conditions. |
@media (max-width: 400px), (orientation: landscape) |
Matches either condition; commas mean alternatives. |
@media not (orientation: portrait) |
Reverses the complete query condition. |
A frequent mistake is assuming that comma-separated clauses behave like and. They do not: a comma creates an alternative query. Conversely, every condition joined with and must be true.
Watch for overlapping or uncovered boundaries
Traditional minimum and maximum queries are inclusive. Therefore, (max-width: 320px) and (min-width: 320px) both match at exactly 320px. Changing the second threshold to 321px removes the overlap but leaves widths between 320px and 321px uncovered.
/* Both rules can match at 320px */
@media (max-width: 320px) { ... }
@media (min-width: 320px) { ... }
/* No overlap, but a narrow gap exists */
@media (max-width: 320px) { ... }
@media (min-width: 321px) { ... }Media Queries Level 4 range syntax expresses the intent directly:
@media (width <= 320px) { ... }
@media (width > 320px) { ... }Check support in the browsers your project must serve before adopting range syntax. Traditional min-width/max-width syntax remains the conservative choice when compatibility is uncertain.
Fix the mobile viewport before judging a phone layout
On mobile, inspect the document’s <head> for this viewport declaration:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
<meta name="viewport" content="width=device-width, initial-scale=1">Without viewport configuration, a mobile browser may use a wider virtual layout viewport. A rule intended for a narrow screen can then fail to match even though the device itself is physically narrow. The declaration tells the browser to use the device width for layout.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchAfter adding or correcting it, reload the page and check the viewport width in responsive tools. Do not use a phone’s hardware pixel count as the media-query value; CSS media queries use the layout viewport in CSS pixels.
If the query matches, inspect the CSS cascade
A matching query does not guarantee a visible result. Verify all three parts:
- Selector: It must match the element you intended. A typo, different class name or unexpected nesting prevents the rule from applying.
- Declaration: The property name and value must be valid. Invalid declarations are discarded.
- Cascade: Another matching declaration can win because it has greater specificity, appears later, or is marked
!important.
.card { width: 600px; }
@media (max-width: 700px) {
.card { width: 100%; }
}
/* This later rule can override the media-query result */
.card { width: 600px; }Move through the matched rules in developer tools. A crossed-out declaration is evidence that the query matched but lost. Compare specificity and source order before adding !important; restructuring the conflicting rule is usually easier to maintain.
Use breakpoints that describe layout constraints
Responsive breakpoints should mark the point where content becomes cramped, wraps badly or needs a different arrangement. They should not be a list of exact phone or tablet models. Different browsers, zoom settings, orientations and embedded contexts can produce different viewport widths on similarly sized hardware.
A practical breakpoint workflow
- Start with the widest layout and resize continuously.
- Note the width where the design first needs a change, such as a navigation row wrapping.
- Add a breakpoint near that constraint.
- Test widths around it, including fractional widths produced by zoom or split-screen layouts.
- Repeat for the next constraint rather than adding device-specific exceptions.
Common failure patterns
Using a desktop-width assumption on a phone
The query is valid, but the missing or incorrect viewport meta tag makes the effective layout viewport wider than expected. Correct the <meta name="viewport" ...> declaration first.
Expecting screen to mean “small screen”
screen selects screen media; it does not impose a width. Add an explicit feature test such as (max-width: ...) or (orientation: ...) when the design depends on one.
Putting a restrictive condition in an and chain
One false condition makes the whole query false. Temporarily remove conditions one at a time to identify which test prevents a match.
Writing two rules that both match
At an inclusive boundary, both rules may apply and the later or more specific declaration wins. Test the exact boundary and choose a consistent convention, or use range syntax where browser support permits it.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Debugging the layout before the condition
Complex flexbox or grid behavior can distract from a query that never matches. Use a conspicuous temporary declaration to establish the query’s truth value before changing layout code.
Quick Recap
A compact diagnostic checklist
- Is the stylesheet loaded, and is the rule inside a valid stylesheet block?
- Are parentheses, colons, units and braces correct?
- Does the actual viewport width satisfy every condition?
- On mobile, is the device-width viewport meta tag present?
- Are comma-separated queries being treated as alternatives rather than combined requirements?
- Do adjacent breakpoints overlap or leave a gap?
- Does the selector match the intended element?
- Is the declaration valid?
- Does another rule win through specificity, source order or
!important? - Have you tested below, at and above each breakpoint, including zoomed or fractional widths?
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
