Entrar Ainda não tem acesso?
1
resposta

Desafio: Flexbox e Breakpoints

Referente ao curso Bootstrap5: crie uma landing page responsiva, no capítulo Flexbox e ícones no Bootstrap e atividade Desafio: Flexbox e Breakpoints

por Estanislau Antonio da Silva Junior
| 73.7k xp | 261 posts

html

<section class="pb-4">

<h2 class="text-center">Conheça todas as nossas facilidades</h2>

    <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3 ">
       <div class="divs-facilidades d-flex align-items-center">
        <div><i class="bi bi-x-diamond fs-1 "></i></div>
        <div>
          <div  class="ms-3 mb-1">PAGUE PELO PIX</div>
          <div class="texto-menor ms-3"></div>5% OFF em
            pagamentos via PIX</div>
        </div>
    </div>

       <div class="divs-facilidades d-flex align-items-center">
      <div class= "bi bi-arrow-repeat fs-1"></i></div>
        <div>
          <div class="ms-3 mb-1"></div> >TROCA GRÁTIS</div>
          <div class="texto-menor ms-3"></div>livre para trocar em até 30 dias.</div>
        </div>
    </div>
     
      <div class="divs-facilidades d-flex align-items-center">
        <div><i class="bi bi-flower1 fs-1"></i></div>
        <div>
          <div class="ms-3 mb-1">SUSTENTABILIDADE</div>
          <div class="texto-menor ms-3"></div>Moda responsável, que respeita o meio ambiente.</div>
        </div>
    </div>
  </div>

  </section>

Css

.texto-menor{
    font-size:13px;
}

.divs-facilidades{
    width: 325px;
}

O meu deu errado!
!

1 resposta
por Victor Costa Santos
| 2916.4k xp | 6033 posts
Alura Scuba Team

Olá, Estanislau! Tudo bem?

Fique tranquilo, erros de sintaxe no HTML acontecem com todo mundo e às vezes um simples fechamento de tag no lugar errado bagunça todo o layout!

Analisei o seu código e encontrei alguns pontos que estão impedindo o funcionamento correto do Flexbox e a exibição dos textos. O principal problema está na forma como as <div> estão sendo fechadas antes do conteúdo de texto, e uma tag de ícone que ficou "quebrada".

Abaixo, deixo o código HTML corrigido. Pode substituir o trecho dentro da sua <section> por este:

<section class="pb-4">
  <h2 class="text-center">Conheça todas as nossas facilidades</h2>

  <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3">
    
    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="bi bi-x-diamond fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1">PAGUE PELO PIX</div>
        <div class="texto-menor ms-3">Ganhe 5% OFF em pagamentos via PIX</div>
      </div>
    </div>

    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="bi bi-arrow-repeat fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1">TROCA GRÁTIS</div>
        <div class="texto-menor ms-3">Fique livre para trocar em até 30 dias.</div>
      </div>
    </div>

    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="bi bi-flower1 fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1">SUSTENTABILIDADE</div>
        <div class="texto-menor ms-3">Moda responsável, que respeita o meio ambiente.</div>
      </div>
    </div>

  </div>
</section>

Dica extra: Sempre verifique se o texto ficou "abraçado" pela tag de abertura <div> e de fechamento </div>. O seu CSS está correto, então com esse ajuste no HTML o layout deve funcionar perfeitamente!

Bons estudos!

Sucesso ✨

Imagem da comunidade

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema