Pessoal, vou compartilhar a minha solução porque estava com o mesmo problema de vocês.
A primeira coisa que fiz foi descobrir o tamanho padrão dos dispositivos.
Mobile S é 320px viewport || Mobile M é 375px viewport || Mobile L é 420px viewport || Tablet é 768px viewport || Laptop é 1024px viewport || Laptop L é 1440px viewport ||
No exemplo o professor usou:
@media (widht: 610px) {
.chamada {
background-color: #FOF;
}
}Esse comando não funcionou comigo.
Conferi se o meu head estava ok:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>Estava ok.
Conferi se estava no css correto e se estava preenchendo certinho (chamada.css). Estava tudo ok. Conferi se tudo estava linkado certinho (caminhos e pastas), e também estava ok.
Antes de chorar e sair correndo mundão afora, vim no fórum mas descobri que não era o único com esse problema. E as respostas que estavam no fórum não funcionavam comigo.
Então fui consultar a W3C e usei esse comando que deu certo e pulei de alegria.
@media only screen and (width: 768px) {
.chamada {
background-color: var(--planos-cartao-ultra);
}
}Observação 1: no meu exercício utilizei 768px mas se você colocar 610px também dá certo. Observação 2: Não utilizei #FOF mas você pode substituir o var por #FOF; que dá certo também.
#nãodesista
#nofimdácerto
#senãodercerto
#corre
#enão
#olha
#p/trás
If you think responsive’s simple, I feel bad for you son. We got 99 viewports, but the iPhone’s just one. —Josh Brewer, March 10, 2010
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
