Part of media query not working

i inserted a media query with 2 properties in my code, one worked and the other property refused to work. i have been playing with it for over an hour, but i couldn’t fix it. I don’t understand why it’s doing that!

Capture
i expected the to be 99% at min-width: 400px… i added the display: none rule to see what was going on, but it worked
https://jsfiddle.net/5ha47o9q/6/ is the link to the code.

And secondly, i initially set the max-width to 700px. when i declared the media query, the width still respected the max-width that i set. i expected it to respect the query, but it didn’t.

On my local file i used the responsive meta tag, though.

In CSS, when two rules have the same priority then order matters. In this case they are both defining properties for the selector form so they have the same priority. So it comes down to whichever was defined last wins. Since you have placed the media query rule at the top, above the other rule, width: 90% wins out. You have two options:

  • move the media query rule below the other rule
  • use ‘!important’ to add a higher priority to the width property in the media rule

Also, here is some fun reading on what the “C” means in CSS:

1 Like

You are too much! I never thought specificity affects media queries. Now i have learnt something new.
Thanks a bunch @bbsmooth!