5
respostas

Adaptação Página Produtos

Não consegui adaptar a página de Produtos adequadamente para Mobile. Alguém que conseguiu, me mostra como ficou o seu @media.

O meu está assim:

@media screen and (max-width: 480px) {

            .caixa, header, ul .produtos  {
                width:auto;
            }

            h1 {
                text-align: center;
            }

            nav { 
                position: static; 
            }

            .produtos li {
                display: block;
            }



    }

Grato desde já!

5 respostas

Fala ai Bruno, tudo bem? Qual foi o problema? Acho que se você passar mais informações para a gente, talvez fique mais fácil alguém ajudar.

Fico no aguardo.

O código ficou conforme descrição abaixo, porém a adaptação só deu certo no MOTO G4, iphone X, galaxy.

@media screen and (max-width: 480px) {
    .caixa,.principal,.conteudo-beneficios,.mapa-conteudo,.video,.Produtos {
        width:auto;
}  
h1{ 
       text-align:center;
}
nav{
    position:static;
}
.lista-beneficios,.img-benef{
    width:100%
}
.Produtos li,.Enviar{ 
    width: auto;           
}
}

Fala Aline, nos demais celulares e dispositivos ficou quebrado o layout?

Fala Matheus,

O problema é que a página ocupa apenas metade da tela. Veja --> https://snipboard.io/r2gTuJ.jpg

Eu acredito que o problema seja essa 'ul': https://snipboard.io/5zuOr8.jpg Mas ainda assim não consegui resolver.

Valeu!!

Fala ai Bruno, na verdade não pode ser a ul porque ela está ocupando a página inteira, talvez você precise rever o alinhamento da página no mobile, tente deixá-lo centralizado com text-align: center ou se estiver utilizando Flexbox com justify-content: center.

Espero ter ajudado.