4
respostas

espaçameto entre as opções dos produtos

mesmo realizando o exercício como na video aula na minha pratica ficou direfente, as opções estão muito perto uma das outras e tem muito espaço livre dos lados, como posso estar resolvendo isso para melhorar a aparencia do site?

site da barbeariaprodutos html

css produtos

4 respostas

Podes modificar o padding da tag "li". Tente colocar um "padding: 75px;" abaixo da linha 15. E veja se deu certo. Se achar que foi muito ou pouco vá alterando o número e verificando o comportamento!

Fala Bruno, beleza cara?

Cara, utilizando o 'display: flex' e o 'justify-content: space-around' no container pai, esses elementos se dividirão automaticamente, segue abaixo um exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.pai{
    width: 740px;
    background-color: rgb(43, 168, 226);
    height: 300px;
    display: flex; 
    justify-content: space-around;
    align-items: center;
}
.filhos{
    width: 160px;
    height: 250px;
    background-color: rgb(238, 255, 0);
}

</style>
<body>
    <div class="pai">
        <div class="filhos"></div>
        <div class="filhos"></div>
        <div class="filhos"></div>
    </div>
</body>
</html>

três quadrados amarelos dentro de um quadrado azul

Olá Bruno,

Provavelmente o prof explicará na próxima aula, porém, como tenho mania de tentar resolver antes do profº explicar, tentei inserir na classe ".produto-descricao" a propriedade padding:

CSS

.produtos h2{
    font-size: 30px;
    font-weight: bold;


}

.produto-descricao{
    font-size: 18px;
**    padding-bottom: 20px; //SUGESTÃO**
}

.produto-preco{

    font-size: 22px;
    font-weight: bold;

}

Ficou desta forma:

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

Oi, Bruno. faltou algumas coisas.

ali onde está nav ul li a deve deixar apenas: nav a

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none;

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 20px;