Tenho dois links CSS no meu site: O layout normal, e as "correções responsivas" com @media. Para fazer os testes com tamanhos diferentes de tela, estou usando o Resposive Design Mode do Firefox. Quando fiz os calculos com @media para telas de 1920x900, tudo correu perfeitamente. Porém, com os calculos para tela de 1280x600, não está funcionando. Ele mantém todos os tamanhos descritos em 1920x900. Porém, quando escrevo outros atributos, ele funciona corretamente. Aqui vai meu código com comentários para melhor compreensão:
/* 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;
}
}
Quem puder me ajudar, eu agradeço demais. Obrigado.