Entrar Ainda não tem acesso?
1
resposta

Segue minha solução para a produtos mobile page

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por Viviane Romualdo de Paula Reis
| 141.3k xp | 9 posts
@media screen and (max-width: 480px){

 .produtos{
        width: auto;
        padding: 0 auto;
        margin: 0 auto;
    }
    .produtos li{
        width: 30%;
        margin: 10px 1%;
        padding:10px 2px;
        border: 1px solid black;
    }
    .produtos li img {
        width: 100%;
        padding:10px 2px;
    }
    .produtos h2{
        font-size: 12px;
    }
    .produtoDescricao,.produtoPreco{
        font-size: 10px;
    }
}
1 resposta
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Viviane, tudo bem?

Legal a forma como você fez, coube certinho na tela de celular! Mas talvez fosse mais interessante deixar em forma de lista, um produto abaixo do outro. Pensou nessa forma também, tenta fazer dessa forma e nos fala se gostou do resultado!