CSS Media Query Hierarchy - Why Doesn't "Smaller" Media Query Render in Browser / Inspector? - html

Question

I have several media queries, but there are two that I'm trying to use to style a certain element:
.navbar-default .navbar-nav>li>a
Here is my CSS including previous media queries:
#media (min-width: 1024px) {
.header-column-secondary {
width: 13%;
}
}
#media (min-width: 768px) {
#gatewaylogo {
height: 85px;
padding-left: 0px;
padding-top: 10px;
}
.phone-number {
font-family: 'Oswald', sans-serif;
color: #ffffff;
font-size: 16px;
position: relative;
}
.social-media {
color: #ffffff;
display: table-cell;
padding: 5px 0 5px 5px;
transform: translateY(-7%);
}
}
#media screen and (max-width: 1024px) {
.navbar-default .navbar-nav>li>a
{
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 60px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 768px) {
.navbar-default .navbar-nav>li>a {
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
}
You can see that the media queries that are applying to .navbar-default .navbar-nav>li>a are (max-width: 1024px) and (max-width: 768px)
The idea is that from 1024px - 769px, I want .navbar-default .navbar-nav>li>a to get margin-right: 60px, and at 768px, tablet size, I want .navbar-default .navbar-nav>li>a to get margin-right: 20px. I plan on continuing to add media queries as the browser width gets smaller - 475px, 375px, and 320px.
So why is it that at 768px, the media query doesn't render? It seems that the media query for 1024px is still getting the style and overriding it. I don't want to add !importants, because then I will continue to have to add !importants all the way down to 320px.
A problem is that I like to design from desktop to mobile - not mobile first. Any suggestions? The website is live here: http://nowordpress.gatewaywebdesign.com/
Thanks

Answer 1

Your are missing a viewport meta tag in the head of your page, add something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!

Answer 2

There are 2 issues in this problem:
viewport definition is missing
both min-width and max-width need to be defined to get media query in this scenario to work.
Here is some detail explanation:
There is no rule_override_based_on_min/max_width in media query. That is, if there are 2 media query rule-set, one is (max-width: 1024px) and another is (max-width: 768px), there is no guarantee that rules inside (max-width: 768px) will override rules inside (max-width: 1024px) -- when conflict happens between 2 rules inside 2 different media query rule-set, the one that appear later in the CSS win. That's why you need both min-width and max-width for media query.
Here is a simple example: although (max-width: 5000px) is a more reasonable rule to take effect, the final background color is pink.
#media (max-width: 5000px) {
.testd {
background: yellow;
}
}
#media (max-width: 100000px) {
.testd {
background: pink;
}
}
<div class="testd">DDD</div>
And David is correct, the viewport definition is missing. Without it, media query is impossible due to pixel ratio.

Answer 3

I think you need a media query like this:
#media (min-width: 768px) and (max-width: 1024px)