2
respostas

Desafio de código responsivo a versão mobile

Boa noite! Segue meu código de CSS em que finalizei com a versão responsiva para mobile. Vou estar anexando tambem um print de como ficou o site na versão mobile. Espero que esteja tudo certo! Agradeço os comentários e sempre aberta a criticas!!!

/*adaptando para que responda bem no desktop, tablet e celular*/
@media screen and (max-width: 480px){
    .caixa, .principal, .mapa-conteudo, .conteudo-beneficios, .video, .beneficios {
        width: auto;
    }

h1 {    
    text-align: center;
}

nav {
    position: static;
}

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

form {
    padding: auto; 
    margin: 15px 20px;
}

h2 {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

main {
    width: 50%;
    display: block;
    padding: auto;
}

.produtos li {
    width: 175%;
    display: block;
    padding: 30px 30px;
    margin: 20px 0 20px 20px;
}

.produto-descricao {
    margin: 20px 0 0 0;
}

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

2 respostas

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

Oi Desirée, tudo bem?

Parabéns pela dedicação a cada aula do curso. Adorei a sua implementação, ficou muito bom!

Muito obrigada por compartilhar com a gente o seu código.

Espero que esteja gostando da experiência de aprendizado.

Um abraço e bons estudos.