Product Landing Page - Media Query not working as excpected

Hey there, working on Product Landing Page; media queries thin isn’t working in some cases (some elements will get the new style and others won’t).


This is an example of a not working element (checked on firefox’s inspector); after going under 600px, those rules will appear on grey, style won’t change.

I’m getting this error with .pricing-grid and #features; don’t know why and this case it’s a bit difficult for me to google; cant find the right words :confused:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0.

Challenge: Build a Product Landing Page

Link to the challenge:

Seems the original declarations were overriding media queries; it’s that possible? I’ve pasted the @media at the bottom of the page and now it’s working. Is this a good solution to this problem or just a tweak to an error i’ve made in another level?

I’m also using “!important;” to override previous declarartions but it feels like cheating.


That’s actually how it works: the first rules get overridden by the ones that follow, even if they’re inside a @media query.

CSS is evaluated from top to bottom, even if they were different files, the order of inclusion is evaluated like this:

<!-- The first one usually is the base -->
<link href="file1.css" />

<!-- This one overrides the values of the first -->
<!-- The ones that match, of course -->
<link href="file2.css" />

!important is usually discouraged because you’re forcing rules that should be easier to override. Even though !important is overridden just like any other rule (click here to see the example working):

.square { width: 50px; height: 50px; }
.c { background-color: red; }
.c { background-color: blue !important; }
.c { background-color: black !important; }

<div class="square c">

I hope this helps :slight_smile:,


1 Like

Seems i get it, however some elements were working fine while others would get the original rules and ignore the media query. I’ve found some people talking about specificity and the selectors, it seems sometimes some selectors are “stronger” or “higher” than others and their style rules won’t be overriden.

Thanks for your time !

1 Like