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

Classes do grid nao funcionam!

As classes que definem as colunas de cada elemento não funciona.

     <article class="card borda-cor-especial largura-artigos col-12 col-md-2">
     <img src="src/img/receita-abacate.jpg" alt="tigela com salada de abacate, vista superior" class="imagem-cards">
     <div class="card-body">
        <h5 class="card-title">Tigela de abacate</h5>
        <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
        <a href="#" class="btn botao-cor-especial">Ver mais</a>
     </div>
     </article>   

     <article class="card borda-cor-especial largura-artigos col-12 col-md-2">
     <img src="src/img/receita-kiwi.jpg" alt="tigela de mingau com kiwi, vista superior" class="imagem-cards">
     <div class="card-body">
        <h5 class="card-title">Salada de kiwi</h5>
        <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
        <a href="#" class="btn botao-cor-especial">Ver mais</a>
     </div>        
     </article>

     <article class="card borda-cor-especial largura-artigos col-12 col-md-2">
     <img src="src/img/receita-mix.jpg" alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior" class="imagem-cards">
     <div class="card-body">
        <h5 class="card-title">Mix de vegetais</h5>
        <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
        <a href="#" class="btn botao-cor-especial">Ver mais</a>
     </div>
     </article> 

     <article class="card borda-cor-especial largura-artigos col-12 col-md-2">
     <img src="src/img/receita-pimentoes.jpg" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior" class="imagem-cards">
     <div class="card-body">
        <h5 class="card-title">Pimentões à Juliana</h5>
        <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
        <a href="#" class="btn botao-cor-especial">Ver mais</a>
     </div>        
     </article>

     <article class="card borda-cor-especial largura-artigos col-12 col-md-2">
     <img src="src/img/receita-oriental.jpg" alt="tigela com salada de vegetais estilo oriental, vista de cima" class="imagem-cards">
     <div class="card-body">
        <h5 class="card-title">Prato oriental</h5>
        <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
        <a href="#" class="btn botao-cor-especial">Ver mais</a>
     </div>        
     </article>

     <article class="card borda-cor-especial largura-artigos col-12 col-md-2">
     <img src="src/img/receita-beterrabas.jpg" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo" class="imagem-cards">
     <div class="card-body">
        <h5 class="card-title">Beterrabas assadas</h5>
        <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
        <a href="#" class="btn botao-cor-especial">Ver mais</a>
     </div>        
     </article>  

  </div>

CSS: .imagem-carrossel1{ object-fit: cover; object-position:0 85%; height: 25rem; } .imagem-carrossel2{ object-fit: cover; height: 25rem; } .fonte-titulo{ font-family: 'Pacifico', cursive;

} .cor-especial{ color: darkred; }

.botao-cor-especial{ color: #FFF; background-color: darkred; } .botao-cor-especial:hover{ background-color: #dcdcdc; color: darkred; } .borda-cor-especial{ border-color: darkred; } .imagem-cards{ object-fit: cover; height: 12.5rem } .largura-artigos{ width: 18rem; }

1 resposta
solução!

Descobri !!! era a largura dos cards que estava definida em 18rem descobri que o ideal é Max-width ! Na aula seguinte vi que a professora falou, aff