Segue minha solução para a produtos mobile page | HTML5 e CSS3 parte 4: avançando no CSS

1
resposta

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

| 2576.8k xp | 4815 posts

Instrutor

15/12/2020

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!