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

Aula 05 Cor de fundo container

Olá boa noite, na aula 05 item 09, muda-se a class="container" para class="container-fluid", no vídeo tudo da certo mas ao implementar isso aqui nó código não funciona. Os cardes perdem a grid. Houve alguma mudança no bootstrap de quando o curso foi elabora para hoje? Ou estou fazendo algo de errado ?

Código abaixo:

    <section class="container-fluid bg-light" id="receitas">
      <div class="row justify-content-center">
        <article class="card borda-especial card-largura p-0 m-4 col-12 col-md-4">
          <img class="card-img-top 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 btn-cor-especial">Visitar</a>
          </div>
        </article>
        <article class="card borda-especial card-largura p-0 m-4 col-12 col-md-4">
          <img class="card-img-top 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 btn-cor-especial">Visitar</a>
          </div>
        </article>
        <article class="card borda-especial card-largura p-0 m-4 col-12 col-md-4">
          <img class="card-img-top 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 btn-cor-especial">Visitar</a>
          </div>
        </article>
        <article class="card borda-especial card-largura p-0 m-4 col-12 col-md-4">
          <img class="card-img-top card-posicao-imagem" src="./src/img/receita-pimentoes.jpg"
            alt="prato com mix 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 btn-cor-especial">Visitar</a>
          </div>
        </article>
        <article class="card borda-especial card-largura p-0 m-4 col-12 col-md-4">
          <img class="card-img-top 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 btn-cor-especial">Visitar</a>
          </div>
        </article>
        <article class="card borda-especial card-largura p-0 m-4 col-12 col-md-4">
          <img class="card-img-top card-posicao-imagem" src="./src/img/receita-beterrabas.jpg"
            alt="tigela com beterrabas e dentes de alho assadas 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 btn-cor-especial">Visitar</a>
          </div>
        </article>
      </div>
    </section>
2 respostas

Oi Danillo tudo bem?

Poderia colocar a pasta do seu projeto no Github por gentileza. Assim podemos analisar melhor o que está acontecendo.

solução!

Na aula funciona por causa da resolução que o navegador do instrutor estava aberto, se fosse uma resolução maior quebraria com certeza. Do que jeito que foi feito em resoluções maiores vai quebrar. É só testar aumentando e diminuindo a tela.

Encontrei os arquivos base (que por sinal não achei no curso) no Github da instrutora e essa parte foi feita diferente, foi utilizado o flex.

Da uma olhada lá: https://github.com/JulianaAmoasei/alura-bootstrap4

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