Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Cards um a baixo do outro

Boa noite pessoal, tentei fazer o desafio e fiquei com o mesmo problema que estou tento agora. Os cards não ficam um ao lado do outro, peguei exatamente o código do gabarito e estou com o mesmo problema. Não vou colocar o meu código aqui agora pois como falei copiei exatamente o código da aula para testar e não está funcionando :( Mas qualquer coisa é só solicitar que colo aqui Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Boa noite, você está utilizando display flex?

display: flex
flex-direction: row

não fiz o desafio, mas posso te ajudar, poderia me mandar o código?

Fala Cicero, blz !

Como eu falei o meu código está igual ao do gabarito do exercício, mas vou colocar o link do github aqui para ficar mais fácil.

https://github.com/RenatoAreas/jornada-milhas

solução!

Opa @Renato, tudo bom? Desculpa a demora para responder, fui dar uma analisada no seu projeto e vi que ficou faltando você adicionar os componentes de app-card-depoimento dentro de uma <div class="card-wrapper"></div> lá no seu src/app/pages/home/home.component.html

<app-banner src="../../../assets/imagens/banner-homepage.png" alt="banner da aplicação jornada"></app-banner>
<app-container>
  <h2>Promoções</h2>
  <div class="card-wrapper">
    <app-card-busca></app-card-busca>
    <app-card-busca></app-card-busca>
    <app-card-busca></app-card-busca>
    <app-card-busca></app-card-busca>
    <app-card-busca></app-card-busca>
    <app-card-busca></app-card-busca>
  </div>
  <h2>Depoimentos</h2>
  <div class="card-wrapper">
    <app-card-depoimento></app-card-depoimento>
    <app-card-depoimento></app-card-depoimento>
    <app-card-depoimento></app-card-depoimento>
  </div>
</app-container>

Segue o print após a alteração

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

Opa Cicero, boa noite e desculpe agora a minha demora !

Fiz o testes aqui e funcionou perfeitamente !

Obrigado amigo :)