3
respostas

O .principal não está adequando ao tamanho mobile

Não sei o que está dando errado mas só a parte do "Sobre a Barbearia Alura" não está ficando adaptada ao tamanho mobile :/

.principal p {
    margin: 0 0 1em;
    width: 940px;
    margin: 0 auto;
}

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

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

aparentemente é por causa do do .principal p ques está quebrando seu layout creio que vc colocando ele dentro do media querie

.principal p {
    width: auto;  /* ou 100% */
}

deva solucionar seu problema porque aqui dentro do:

.caixacabecalho, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
        width: auto;
    }

você esqueceu de colocar .principal p

Era isso mesmo Anthoni! Muito obrigada!