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

container-fluid

Boa noite! Ao adicionar o "container-fluid", o layout das imagens mudou, e ficaram quatro cards em cima e dois embaixo.

  <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
  <img src="src/img/receita-abacate.jpg" class="card-img-top card-posicao-imagem" alt="tigela com salada de abacate, vista superior">
    <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">Veja a receita</a>
    </div>
  </article>

  <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
    <img src="src/img/receita-kiwi.jpg" class="card-img-top card-posicao-imagem" alt="tigela de mingau com kiwi, vista superior">
    <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">Veja a receita</a>
    </div>
  </article>

  <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
    <img src="src/img/receita-mix.jpg" class="card-img-top card-posicao-imagem" alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
    <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">Veja a receita</a>
    </div>
  </article>

  <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
    <img src="src/img/receita-pimentoes.jpg"  class="card-img-top card-posicao-imagem" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
    <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">Veja a receita</a>
    </div>
  </article>

  <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
    <img src="src/img/receita-oriental.jpg" class="card-img-top card-posicao-imagem" alt="tigela com salada de vegetais estilo oriental, vista de cima">
    <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">Veja a receita</a>
    </div>
  </article>

  <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
    <img src="src/img/receita-beterrabas.jpg" class="card-img-top card-posicao-imagem" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
    <div class="card-body">
      <h5 class="card-title">Beterrabas assadas</h5>
      <p class="card-text">"tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo"</p>
       <a href="#" class="btn botao-cor-especial">Veja a receita</a>
    </div>
  </article>
  </div>
3 respostas

Oi, Bernardo, tudo bem?

Eu preciso do seu arquivo CSS também. Você pode postar aqui?

Oi, Laís! Tudo bem! E com vc? Segue o arquivo css:

.card-largura { max-width: 18rem; }

.imagem-carrossel-um { object-fit: cover; object-position: 0 80%; height: 400px; }

.imagem-carrossel-dois { object-fit: cover; height: 400px; }

.fonte-titulo { font-family: 'Pacifico', cursive; }

.cor-especial { color: darkred; }

.botao-cor-especial { background-color: darkred; color: white; }

.borda-cor-especial { border-color: darkred;}

.card-posicao-imagem { object-fit: cover; /object-position: 0 80%;/ height: 200px; }

solução!

Estava tentando achar a solução, e coloquei o "container-fluid" na "div class" logo abaixo. Aparentemente funcionou...