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

[Dúvida] COL-MD

Quando coloco o comando "col-md-" seguido de qualquer número, o meu display grid se mantém igual, enquanto o da professora fica lado a lado, ocupando 2 de espaço por coluna, segue o meu código abaixo.

    <section class="container" id="receitas">

      <div class="row">

        <article class="card borda-cor-especial card-largura col-md-2">
          <img class="card-posicao-imagem" src="src/img/receita-abacate.jpg" 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 col-md-2">
          <img class="card-posicao-imagem" src="src/img/receita-kiwi.jpg" 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 col-md-2">
          <img class="card-posicao-imagem" src="src/img/receita-mix.jpg" 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 col-md-2">
          <img class="card-posicao-imagem" src="src/img/receita-pimentoes.jpg" 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 col-md-2">
          <img class="card-posicao-imagem" src="src/img/receita-oriental.jpg" 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 col-md-2">
          <img class="card-posicao-imagem" src="src/img/receita-beterrabas.jpg" 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">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>

      </div>
    </section>
2 respostas
solução!

Consegui resolver, o "card-largura" estava travando o width do card

Oi Gabriel, tudo bem?

Que bom que conseguiu resolver o problema e obrigada por compartilhar a solução. Irei finalizar o tópico pra você.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software