Member Avatar for FALL3N

I am having a huge problem. In my stylesheet I have:

@media only screen and (min-width: 320px) and (max-width: 700px)
{
code1
}

@media only screen and (min-width: 1280px) and (max-width: 1400px)
{
code2
}

my browser window is currently 640x960, so only code1 should run... right? But code1 and code2 are both running. How do I change my media queries so that only code1 will run with my browser window at 640x960?

  • 2 Contributors
  • 6 Replies
  • 347 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by cereal

Dani AI

Generated

Good troubleshooting thread — the things to check fall into three groups: syntax, whether the stylesheet is actually being loaded in the order you expect, and how the browser interprets the viewport. was right to flag syntax (missing braces/parentheses), and 's experiment with moving the rules correctly pointed toward a loading/order problem rather than the media queries themselves.

Try this concise checklist (work top to bottom):

  • Inspect the computed styles in your browser DevTools to see exactly which rule and file are applying. That immediately shows whether two rules really match or one is simply overriding the other.

  • Verify the page has a proper responsive viewport meta tag (for mobile testing), e.g. <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, media queries behave differently on phones.

  • Validate your CSS to catch stray braces or unclosed parentheses — a parser error earlier in the file can make later rules behave unpredictably.

  • Confirm the stylesheet load order: if queries are split across files, the cascade and file order determine which rules win. Also check any build tools or plugins that concatenate/minify CSS, since they can reorder or remove media attributes.

  • Clear caches and disable CSS optimizers temporarily so you see raw files while debugging.

  • Prefer a consistent breakpoint strategy (mobile-first with min-width or desktop-first with max-width) to avoid accidental overlaps.

  • Test in a second browser or use device emulation and toggle orientation — orientation and device pixel ratio can change which media query matches.

If both rules still appear to apply, DevTools will point to the originating file and line; use that to trace whether a missing include, cache, or plugin step is the real culprit.

Recommended Answers

All 6 Replies

Member Avatar for cereal

Are you sure you're not missing some closing parentheses in the first block? I don't see how both rules could apply when the second range is not reached by your resolution.

By the way, is this portrait oriented?

Member Avatar for FALL3N

there was a stray bracket which I removed, but I am still having the same problem

Member Avatar for FALL3N

I moved the media queries to another linked stylesheet and now neither of them are loading.

Member Avatar for cereal

Could you paste the full stylesheet?

Member Avatar for FALL3N

I got it. It was a wordpress site and I had deleted the wp_head() function. That function needs to be there in order for the stylesheets to be linked properly.

Member Avatar for cereal

Ok, thanks for the update. Bye!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.