Why my media queries does not work?(Solved)

Why my media queries does not work?(Solved)
0.0 0

#1

Codepen link


#2

your .universal class is overriding your references to the section, aside and footer tags.


#3

I thought in css the rules that appeared last will over write the rules that appear 1st??


#4

when you’re referring to the same thing, yes; in the case you’re using, you had applied the .universal class to those tags in the HTML, but only referred to the tags in your CSS queries. So, the CSS class was still overriding the tag references. Looks like you removed the width property from your class which got the result you wanted (I assume), however you could instead have amended your CSS queries to be “section .universal”, “aside .universal”, etc. and would have achieved the same result since your query would then be amending the universal class as it relates to the tag


#5

I see. I forgot that CSS specificity goes a Inline>ID>Class>Tag sequence.
The quoted part I don’t understand… Could you elaborate/made a code pen example?
That would be much appreciated. Thanks.


#6

Sure – let’s assume you had left the width property in your .universal class as you had it before; then in your media query (I’m using the last one as an example), your code would be:

@media screen and (min-width:800px){
  section.universal{ 
    width:20%;
  }
  aside.universal{
    width:60%;
  }
  footer.universal{
    width:20%;
  }
}

make sense?


#7

I see. So now it works because when it comes to specificity, section.universal > section .
Is it? One tag & one class is larger than one class only?


#8

I’m not sure “larger” is the word I’d use for it, but essentially yeah that’s it. So, you could have another section in your html that is either stand-alone (no associated class) or has a class other than .universal tied to it, and your media query (using section.universal) would not have an impact on that new section.


#9

Replace “larger” to “more prior to”. LOL.
I see. Thanks for the help. If I have any more question in the future can I pm you ?


#10

You can PM me, but I can’t promise I’ll be able to reply promptly; that said this forum is chock full of other coders who undoubtedly know more than I do so don’t be hesitant to ask questions publicly if you’ve found yourself stuck


#11

that’s ok. Thanks!!!