Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

@media não está funcionando

Olá! Não estou vendo alterações no layout para mobile com o meu código :(

HTML:

<head>
        <meta charset="UTF-8">

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

        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>

CSS:

@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%
    }

}
1 resposta
solução!

A tag meta está incompleta você esqueceu de colocar o initial-scale=1. A tag meta certinha fica assim:

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