Não estou conseguindo colocar os produtos um embaixo do outro kkk.
Gostaria de uma dica para resolver isso.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Não estou conseguindo colocar os produtos um embaixo do outro kkk.
Gostaria de uma dica para resolver isso.
Olá Alisson! Você deve alterar o .produto que esta em px para 100% no style.css
.produtos {
width: 100%;
}e no @media inserir . produtos li com width 100%
@media screen and (max-width: 480px) {
.produtos li {
width: 100%;
}
}Espero ter ajudado, Boa sorte
Uma solução que pensei foi passar o display dos itens da lista de produtos para Block assim ocupando a linha inteira, mas não sei se é a melhor solução
.produtos li {
display: block;
text-align: center;
width: auto;
vertical-align: top;
margin: 5% 1.5%;
padding: auto;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
}