@media in CSS does not work properly

Question

I have two CSS links on my site: The normal layout, and the "responsive fixes" with @media. To do the tests with different screen sizes, I’m using Firefox’s Resposive Design Mode. When I did the calculations with @media for 1920x900 screens, everything went perfectly. However, with the 1280x600 screen calculations, it is not working. It keeps all the sizes described in 1920x900. However, when I write other attributes, it works correctly. Here’s my code with comments for better understanding:

/* Para monitores 1280x600px */
@media screen and (max-height: 600px){
    /* Da forma que está, não funciona, ele continua pegando o height descrito em @media screen and (max-height 900ox). Porém, se eu troco este atributo por display:none; ele funciona. */
    #slider{
        height:73.5vh;
    }
}

@media screen and (max-width: 1280px){
    #mainAtc{
        margin-left:2vw;
    }

    #othAtc{
        margin-left:0;
    }
}

/* Para monitores 1920x900px */
@media screen and (max-height: 900px){
    /* Da mesma forma, se eu trocar o atributo para telas 1280x600 para display:none, e trocar o atributo para telas de 1920x900 para display:block, ele mostra as imagens, como se nao funcionasse quando os atributos são iguais */
    #slider{
        height:51.6vh;
    }
}

@media screen and (max-width: 1920px){
    #mainAtc{
        margin-left:2vw;
    }

    #othAtc{
        margin-left:7.6vw;
    }

    #atcRest{
        margin-left:2vw;
    }
}

Anyone who can help me, I really appreciate it. Thank you.

Answer 1

Just add a minimum value. Because the monitor size was less than or equal to 600 and 900px (both measures calculated) it performed both tasks. because then I did the treatment the following way: @media screen and (min-height: 601px) and (max-height:900px), in this way the problem has been solved.