CSS Media Query not Overriding

I have this problem where my media query on specific screen size is not overriding. When I open mg dev tools, there's a strikethrough on my style even though I have the same screen size. I don't understand why there's a strikethrough, I would appreciate any help. Thanks!
No description
No description
4 Replies
MarkBoots
MarkBoots15mo ago
it has to do with the order of the media query in your style.css first you do a media query with max width 1199px (line 916), but after that you override it to 1399.98 (line 946) so you have two options, change the order, or declare a more specific range with a min and max width
@media (max-width: 1199px) { ... }
@media (min-width: 1200px) and (max-width: 1399.98px) { ... }
@media (max-width: 1199px) { ... }
@media (min-width: 1200px) and (max-width: 1399.98px) { ... }
qkyu
qkyuOP15mo ago
It works, thank you so much! I didn't know the order would matter, I thought that it would prioritize the screen resolution. Thanks again!
MarkBoots
MarkBoots15mo ago
Just as an example 500px is less than 1199px, but it's also less than 1399.98 px. So wich should it pick? Well, there the order comes in.
qkyu
qkyuOP15mo ago
Ohh, it makes sense now. Thank you!
Want results from more Discord servers?
Add your server