Media query nao funciona o max-width

Oi Amanda, tudo bom?

Uma coisa que você pode fazer é definir um range para o seu max-width para que as propriedades do max-width: 575.98px não sobreescrevam as do max-width: 480px:

@media (max-width: 480px) {
  .nav li a {
    font-size: 5em;
  }

  .group-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


@media (min-width: 481px) and (max-width: 575.98px) {
  .nav li a {
    font-size: 2em;
  }

  .group-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

Entao, mesmo assim nao funciona.

A minha intensão é que para os aplicativos com no máximo 480px ele faça algumas alterações para melhor visibilidade.

porem se eu coloco max-width ele nao deveria passar essas instruções para os dispositivos que tem ate 480px?

heeeeeelp, estou quase quebrando o note aqui

atualizei meu codigo no github,

queria fazer funcionar essa media.

@media  (max-width: 480px) {
  .nav li a {
    font-size: 2em;
  }

  .group-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

Então Amanda, testando no Chrome realmente não funciona, porém no Firefox rola de boas.

É necessário padronizar o viewport para todos os dispositivos, para isso podemos usar a tag meta.

<meta name="viewport" content="width=device-width, initial-scale=1">

Espero que resolva seu problema, qualquer dúvida só falar :D

funcionou, muuuuuuito obrigada!

estava quebrando a cabeça com isso!!