1
resposta

Display tamanho diferente

O display onde fica cabelo e barba esta menor segue !foto e codigo. Se alguem puder me ajudar eu agradeço

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

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

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.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: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;    
}

.produtos li:hover h2 {
    font-size: 34px;
}

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

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

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

1 resposta

Olá, Sayonara.

Tudo bem?

Isso acontece porque não foi definida uma altura fixa para esses elementos, ai quanto mais texto estiver dentro deles, maiores eles vão ficar.

Se você reparar no terceiro que está menor, ele está com menos texto, no caso uma linha enquanto que os outros estão com duas linhas.

Você pode resolver deixando eles com o mesmo tanto de texto e linha, ou adicionar uma quebra de linha no terceiro com a tag <br></br> que vai criar um espaço de uma linha invisível, ou colocar uma altura fixa para os três itens com o height: ;.

Espero ter ajudado.

Qualquer dúvida manda aqui :)