Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Tag article, quebra de texto e largura do botão saiba mais.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Cards

por Diohn Pablo de Sousa Costa
| 41.8k xp | 3 posts

Gostaria de saber se a maneira como constuí o html também estaria correto utilizando a tag 

[<article class="card">
    <div class="card__container">
        <h3 class="card__titulo">Talvez você também se interesse por...</h3>
        <h2 class="card__titulo-livro">Angular 11 e Firebase</h2>
        <p class="card__descricao">Construindo uma aplicação integrada com a plataforma do Google.</p>
        <ul class="botoes">
            <li class="botoes__item"><img src="img/Favoritos.svg" alt="Ícone de favoritos"></li>
            <li class="botoes__item"><img src="img/Compras.svg" alt="Ícone de carrinho de compras"></li>
        </ul>
    </div>
    <div class="card__container">
        <div class="card__container__imagem">
            <img src="img/Angular.svg" alt="Imagem Angular" class="card__imagem">
        </div>
        <div class="card__container__botao">
            <a href="#" class="card__botao">Saiba mais</a>
        </div>
    </div>
</article>]()


Contudo no resultado final os textos da primeira coluna não estão com a quebra igual a do figma e o botão saiba mais não esta ficando do mesmo tamanho da imagem, pois ao utilizar 2.2rem o texto quebra para a próxima linha.
2 respostas
solução!
por Diohn Pablo de Sousa Costa
| 41.8k xp | 3 posts

Esse é o meu CSS

.card {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 1.2rem 1.5rem;
    padding: 1rem;
    background: var(--branco-principal);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;

}

.card__titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--laranja);
}

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

.card__descricao {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 1rem;
}

.botoes {
    display: flex;
    margin: 0.5rem 0;
}

.card__container {
    display: flex;
    flex-direction: column;
}

.card__container__botao {
    margin: 2rem 0;
}

.card__botao {
    font-weight: 700;
    background-color: var(--laranja);
    color: var(--branco-principal);
    padding: 1rem 1.9rem;
}
por Renan Lima
| 3653.4k xp | 7699 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Diohn.

Tudo bem?

Eu cliquei sem querer no botão solucionar desse tópico. Mas vamos lá vou te ajudar.

A sua estrutura HTML utilizando a tag <article> parece estar correta e bem organizada. No entanto, as questões relacionadas à quebra de texto e largura do botão "Saiba mais" podem estar relacionadas ao CSS que está sendo aplicado ao seu HTML.

Com base no CSS fornecido, você pode tentar fazer o seguinte para ajustar a quebra de texto e a largura do botão "Saiba mais":

Para ajustar a quebra de texto na primeira coluna, adicione word-wrap: break-word à classe .card__descricao. Isso fará com que o texto seja quebrado para a próxima linha se ele não couber na largura da coluna. Por exemplo: css Copy code .card__descricao { font-size: 14px; font-weight: 400; color: rgba(0, 0, 0, 0.85); margin-bottom: 1rem; word-wrap: break-word; } Para ajustar a largura do botão "Saiba mais", você pode adicionar um container em torno da imagem e do botão e ajustar a largura desse container. Por exemplo: css

<div class="card__container">
    <div class="card__container__imagem">
        <img src="img/Angular.svg" alt="Imagem Angular" class="card__imagem">
    </div>
    <div class="card__container__botao">
        <a href="#" class="card__botao">Saiba mais</a>
    </div>
</div>

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

.card__container__imagem {
    width: 50%;
}

.card__container__botao {
    width: 50%;
}

Dessa forma, o container terá 50% da largura da coluna e a imagem e o botão serão ajustados dentro desse container. Note que o display da classe .card__container foi alterado para flex e a propriedade align-items: center foi adicionada para centralizar a imagem e o botão verticalmente.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.