Media CSS queries not working and conflicting

Question

I’m developing the one-page responsive and the documentation says to do the media queries as follows:

@media(max-width:767px){}
@media(min-width:768px){}
@media(max-width:992px){}

Uso Bootstrap 3.

So follow my CSS code:

@media (max-width:767px) {
    /* de 0px até 767px */
}
@media (min-width:768px) and (max-width: 992px) {
    /* de 768px até 992px*/

}
@media (min-width:992px) and (max-width: 1200px){
    /* acima de 992px */
    .infos-schedule{
        font-size: 15px;
    }

    .title-infos{
        font-size: 15px;
    }
}

.infos-schedule{
    font-family: "Montserrat";
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: 1.8px;
    text-align: left;
    color: #0a1414;
    margin-bottom: 0px !important;
}

.title-infos{
    color: #037C74;
    margin-right: 5px;
    font-size: 20px;
}


.create-in-schedule{
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.22;
    letter-spacing: 1.8px;
    text-align: right;
    color: #707070;
    display: block;
}
.title-header{
    margin-bottom: 10px;
    padding: 0px;
    display: flex;
    align-items: center;
}


.title{
    font-family: "Montserrat";
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.24;
    letter-spacing: 2.1px;
    color: #0a1414;
    font-size: 21px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.card-schedules {
    margin: 10px 5px;
    background-color: #ecf3f8;
    height: 150px;
}

HTML:

<mat-card class="card-schedules" 
                        *ngIf="pendente.status == 'Pendente'" >

                  <mat-card-content>
                    <div class="col-lg-12 col-md-12 col-sm-12 title-header">
                      <div class="col-lg-10 col-md-10 col-sm-12 infos-schedule padding0"><b class="title-infos">Anúncio: </b>{{ pendente.Anuncio }}</div>
                      <div class="col-lg-2 col-md-2 create-in-schedule padding0">{{ pendente.created_in | date:'MM/dd/yyyy'}}</div>
                    </div>
                  </mat-card-content>
</mat-card>

The problem is that the media query of 992px not being obeyed in the classes already produced and predominates the CSS of the media query greater.

Follow what the Browser is showing me:

What’s going on?

Answer 1

Do so:

@media (max-width:767px) {
    /* de 0px até 767px */
}
@media (min-width:768px) and (max-width: 992px) {
    /* de 768px até 992px*/
}
@media (min-width:992px) {
    /* acima de 992px */
    /* ... */
}

Remembering that his HTML needs the viewport. I usually use this setting:

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=10, minimum-scale=1.0">

@Edit:

About the image posted in the question issue, consider this my comment in the @hugocsl reply:

You can put everything with max-width or min-width also, but will "keep" (inherit) the properties if they are not overwritten...

As the nomenclature itself says, CSS cascades. If you need to FORCE overwriting of an attribute, add the keyword !important next to the value:

font-size: 15px !important;

Recommended reading: Sopt - What is the purpose of the declaration "!Mportant"?

@edit2:

As @hugocsl "reminded us", since it went unnoticed, you should declare the media queries after the elements in question.

"- ALL @media rules should be the last things. Like first you write all your CSS, all the classes etc, then there at the end of everything you start to write the media querys and put the @ Day you need, they should come after all" – hugocsl

CSS style in cascade, as its name already says (Cascading style sheet). So your code should look like this:

.infos-schedule {
    font-family: "Montserrat";
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: 1.8px;
    text-align: left;
    color: #0a1414;
    margin-bottom: 0px !important;
}

.title-infos {
    color: #037C74;
    margin-right: 5px;
    font-size: 20px;
}

/* ... */

@media (min-width:992px) and (max-width: 1200px){
    .infos-schedule{
        font-size: 15px;
    }

    .title-infos{
        font-size: 15px;
    }
}

So that whatever is declared within the @media override what is declared before she.

Answer 2

Your problem is that the min-width override the max-width

Here’s how your CSS is

@media(min-width:768px){} /* aqui está "errado" */
@media(max-width:992px){...

Whatever’s inside that one @media(min-width:768px){} will overwrite whatever is on @media(max-width:992px){}, because the rules of max-992 shall be "cancelled" if they are also in min-768

See what the Mozilla documentation says: https://developer.mozilla.org/es/docs/Web/CSS/max-width

max-width overrides width, but min-width overrides max-width.

One solution is to do as @Lipespry said in his reply. Or else you put the two with min-width

@media(min-width:768px){} 
@media(min-width:992px){...

This answer has other details that will help you a lot to understand this concept of min and max and the @media pq works and pq times of problem:
Media Queries Does Not Work Informed Measures