Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Espaçamento do segundo card

Olá. Fiz o segundo card reutilizando o código do primeiro e não alterei o CSS, porém o texto ficou com um espaçamento inferior muito maior, ficando bem afastado dos botões. Como corrijo isso?

Print da tela desenvolvida, contendo um card, um carrossel e outro card

<div class="card">
                <!-- Primeira linha -->
                <div class="card__descricao">
                    <!-- Primeira coluna-->
                    <div class="descricao">
                        <img src="assets/Estrelinhas.svg" alt="5 Estrelas">
                        <h3 class="descricao__titulo">Autora do Mês</h3>
                        <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
                        <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>
                    </div>
                    <!-- Segunda coluna-->
                    <img class="descricao__imagem" src="assets/Perfil-escritora 1.svg" alt="Logo do Angular">
                </div>

                <!-- Segunda linha -->
                <div class="card__botoes">
                    <!-- Primeira coluna-->
                    <ul class="botoes">
                        <li class="botoes__item"><img src="assets/Favoritos.svg" alt="Favoritar livro"></li>
                        <li class="botoes__item"><img src="assets/Sacola.svg" alt="Adicionar no carrinho de compras"></li>
                    </ul>
                    <!-- Segunda coluna -->
                    <a href="#" class="botoes__ancora">Saiba mais</a>
                </div>
            </div>
.carrossel__titulo {
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5em 0;
}

.swiper-slide img {
    width: 100%;
}

.swiper-button-prev, .swiper-button-next {
    display: none;
}

.swiper-pagination {
    position: initial;
    margin: 0.5em 0;
}

.card__descricao {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.card__botoes {
    display: flex;
    justify-content: space-between;
}

.botoes {
    display: flex;
    align-items: center;
}

.card {
    background: var(--branco);
    border-radius: 10px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 1em;
    padding: 1em;
}

.descricao__titulo {
    color: var(--laranja);
    font-weight: 700;
}

.descricao__titulo-livro {
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    margin: 0.5em 0;
}

.descricao__texto {
    font-size: 14px;
}

.botoes__item {
    margin: 0 0.5em;
}

.botoes__ancora {
    background-color: var(--laranja);
    padding: 1em 2.2em;
    color: var(--branco);
    font-weight: 700;
    text-decoration: none;
}
1 resposta
solução!

Opa Fernando! Tudo bem?

Analisando as informações que você me passou, eu posso dizer que de maneira mais objetiva, os itens do segundo card não ficaram como os do primeiro por um motivo bem simples, no primeiro card, as tags com as seguintes classes: descricao__titulo e descricao__titulo-livro tinham mais conteúdo que no segundo card. E a tag com a classe descricao__texto tinha um conteúdo suficiente para preencher o resto do espaço.

Já no segundo card o que acontece é que temos a adição das "Estrelinhas", mas elas nem se comparam ao tamanho do conteúdo da tag com a classe descricao__titulo do primeiro card, e o mesmo acontece com o conteúdo da tag com a classe descricao__titulo-livro, nem ela e nem a descricao__titulo tem muito conteúdo, deixando um espaço maior para ser preenchido, mas a tag com a classe descricao__texto por sua vez não tem conteúdo suficiente para preencher o resto do espaço. Assim temos essa impressão de ter um espaçamento inferior maior, mas, na verdade, é só um espaço de deveria ter conteúdo e não tem, só isso.

Uma sugestão minha é você tentar adicionar aos estilos da classe card__descricao a seguinte propriedade align-itens: center;, isso deve fazer todos os itens dentro dessa div se alinharem centralmente na direção vertical, ou seja, eles devem se alinhar de forma automática para que esse espaço sem conteúdo seja ocupado, ou melhor, distribuído, mas já aviso que isso pode quebrar os estilos do primeiro card. Mas teste essa possibilidade, se der certo ótimo, senão, escolha:

  1. Você pode pedir minha ajuda novamente que eu posso lhe ajudar a eliminar esse espaço usando uma solução personalizada;
  2. Você pode deixar assim mesmo e verificar que esse espaço não gera um problema, mas sim é só mais uma peculiaridade do código.

Era isso, se precisar eu estarei por aqui!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓