CSS Alterar largura de elemento CSS

[Fertiin]

Tenho um elemento CSS o qual desejo que ele tenha diferentes larguras de acordo com o dispositivo, segue meu código:

@media screen and (max-device-width: 415px) {
  .card{
  	width: 22rem;
  }
}

@media screen and (max-device-width: 768px) {
  .card{
  	width: 20.8rem;
}
  
@media screen and (max-device-width: 1024px) {
  .card{
  	width: 18.5rem;
  }
  
}
  

As configurações para os dispositivos de até 415px e de até 768px funcionam perfeitamente sem a última configuração (de 1024px) estar configurada, quando a configuro, os dispositivos de até 768px assumem as configurações dos dispositivos de até 1024px, como posso resolver?

[DiF]

@Fertiin Olá, 

um dos erros que vejo ali é que na regra de 768px faltou fechar o bloco do @media.

Ademais, creio que a ordem ali é importante. Coloque em ordem decrescente.

 

Exemplo: https://jsfiddle.net/dife/pht7fea3/14/

 

PS:  podes usar este modelo: https://gist.github.com/Mikodes/be9b9ce42e46c3d4ccb6

Ali tem todas as resoluções usadas!