How to properly do multiple CSS media queries - html

Question

I've been trying to implement some media queries for a single page, basically, I want to hide and resize some elements based on the viewport dimension.
The issue I'm currently running into is that for some reason the 2nd media query does not seem to trigger.
as I understand for media queries to run I need to add the meta field (that's already done). And that they should follow a cascade order...so from max resolution to min resolution.
for some reason, only the first query is triggering and the second is not.
as I understand the "woman-image" class should be hidden when I reach a 1100px width,
and "h2.fin-text-navy2" should become yellow...It never happens...
I really appreciate the help on this.
#media all and (max-width: 1400px) {
h1.fin-text-navy {
font-size: 500%;
line-height: .9;
text-align: center;
padding-left: 0px;
padding-top: 50px;
margin-bottom: 25px;
}
.woman-image {text-align: left;}
h2.fin-text-navy2{
font-size: 250%; text-align: center;
line-height: 1.5;
padding-left: 0px;
margin-bottom: 50px;
}
.grid-container {
grid-template-columns: .8fr .5fr;
grid-auto-rows: minmax(500px, auto);
}
.buttonCenter{ width: 90%; padding: 16px; font-size: 35px; }
}//end media
#media all and (max-width: 1100px) {
.woman-image{ display: none; }
h1.fin-text-navy {
font-size: 500%;
line-height: .9;
text-align: center;
padding-left: 0px;
padding-top: 50px;
margin-bottom: 25px;
}
h2.fin-text-navy2{
font-size: 200%;
text-align: center;
line-height: 1.5;
padding-left: 0px;
margin-bottom: 50px;
color: yellow;
}
.grid-container {
grid-template-columns: .8fr 0fr;
grid-auto-rows: minmax(500px, auto);
}
.buttonCenter{ width: 90%; padding: 16px; font-size: 35px; }
}//end media

Answer 1

The problem seems to be one of a simple error in your CSS.
There are a couple of 'comments' end media which start with a double slash. This is not correct CSS. If those (in this case in particular the first one) are removed then the second media query works.
It can be worth putting your code through a validator - in this case I used the W3C validator and it came up with the errors clearly showing the lines they occured on.
It's also worth lookiing in the browser dev tools to see exactly what CSS is being picked up and used on an element.
Incidentally, the code worked fine without the meta field that you mentioned (at least on Edge/Chrome Windows10).

Answer 2

Try this
first of all as you well said you need the meta viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Then in your CSS, I recommend adding all the styles for the biggest format available without media queries, and then create a media query for each desired format:
/*All sizes and big format (desktop)*/
.woman-image {text-align: left;}
/*Tablets*/
#media (max-width:1024px){
.woman-image {text-align: right;}
}
/* Tablet Portrait */
#media (max-width:768px){
.woman-image {text-align: center;}
}
/*Mobile */
#media (max-width:640px){
.woman-image {display: none;}
}
In the previous example the element with class .woman-image will have the following behavior:
Desktop: text-align: left;
Tablet: text-align: right;
Tablet Portrait: text-align: center;
Mobile: display: none;

Answer 3

You should try using min-width: 1100px in your first media query and use max-width: 1100px in your second media query.
Because if you are using max-width: 1400px than it means that "If your screen size is 1400px or less, than do the following task" , that's why for your screen's every value less than 1400px you are seeing your first media query at work.
Whereas if you use min-width:1100px in the first place than, than it would mean that "If your screen size is 1100px or more, than do the following". And than you should use max-width:1100px. so in this case 1100px will be a threshold value.
#media all and (min-width: 1100px){
//...do the task for 1100px and more
}
#media all and (max-width: 1100px){
//...do the task for 1100px and less
}