Why do only some styles in my media query work?
(Jsfiddle for context: https://jsfiddle.net/0w34L6sr/10/)
For some reason, it seems that only some styles defined in my media query for width are applying when their parameters are achieved. Like when the screen width is less than 50rem, the icon font size should reduce from 2rem to 1rem and the left border on the span should disappear, but neither appear to apply.
Another problem with media queries that I'm encountering (not in the jsfiddle) is that some styles have to be in their own media query to work, even though the query parameters themselves are identical.
Why is this happening? Thanks.
4 Replies
they're applied in order, so if you have rules in a media query that are also in the main body below the media query, they'll be overwritten
So my query needs to be below my standard styles?
yes
Excellent, that seems to have worked. Thanks man 😁