How to properly do multiple CSS media queries

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).