Ola,
Estou tentando intender porque meu código só funciona a media se eu uso o min-width! Quando vou usar o max ele não funciona.
estou usando o bootstrap 4 e ja tentei de tudo e não funciona.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Ola,
Estou tentando intender porque meu código só funciona a media se eu uso o min-width! Quando vou usar o max ele não funciona.
estou usando o bootstrap 4 e ja tentei de tudo e não funciona.
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!!