Como deixar a página de produtos responsivo, estou tendo dificuldade nela... | HTML5 e CSS3 parte 4: avançando no CSS

1
resposta

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Fagner José Barros de Sousa

| 13.4k xp | 1 posts

no projeto barbearia alura, na pagina de produtos estou tendo dificuldade, ja coloquei no html da pagina produtos, agora o css estou perdido ...a home e a pagina contato eu consegui...agora a de produtos não... alguém pfv ajuda

1 resposta

por Renan Lima

| 2884.5k xp | 5998 posts

Instrutor Scuba Team

31/01/2023

Olá, Fagner.

Tudo bem?

O legal é deixar os cards da página de produtos um embaixo do outro, você pode adicionar no modo reponsivo um width: 100%; na <ul> de produtos, e nas <li> adicinar um display: block; , com isso vão ficar um embaixo do outro:

Adiciona esse código na parte do responsivo, da página de produtos:

.produtos{
        width: 100%;
}
.produtos li{
        display: block;
        width: 80%;
        margin: 20px auto;
}

Pode ser que tenha que ajustar os espaçamentos, margens, ai isso deixo com você :)

Espero ter ajudado.

Qualquer dúvida manda aqui. Valeu.