Meta viewport ou media não funcionam | HTML5 e CSS3 parte 4: avançando no CSS

1
resposta

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Meta tag de Viewport

por Othavio De Lima Sousa

| 61.1k xp | 3 posts

Olá! Meu problema é que, mesmo com dispositivos com largura menor que 480px, as mudanças dentro do media não funcionam. Seguem os códigos:

<meta name="viewport" content="width=device-width">

@media screen and (max-width: 480px) {
    .caixa{
        width: auto;
    }
}

Mesmo assim, a caixa continua com width de 940px. Não sei se tem alguma relação com o problema, mas tem algumas mensagens de erro nos navegadores: "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform"; "Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute";

Não consigo resolver o problema :(

Att

1 resposta

por Anthoni

| 308.5k xp | 160 posts

07/02/2022

Depende da ordem que vc está usando vc tem que por media querie depois do código fora das media ex.:

<style>
        .caixa {
            height: 500px;
            width: 940px;
            background-color: blue;
        }

        @media screen and (max-width: 480px) {
            .caixa {
                width: auto;
            }
        }
    </style>