Entrar Ainda não tem acesso?
3
respostas

[Dúvida] ícone e texto desalinhado

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

por Tarlei Rodrigues de Oliveira
| 86.4k xp | 14 posts

Olá, eu fiz o projeto certo e deu essa diferença aqui no projeto, e segue meu código

` 

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

<div class="d-flex flex-column align-items-center gap-3">
  <div class="divs-facilidades d-flex">
    <div><i class="bi bi-x-diamond fs-1"></i></div>
    <div>
      <div>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">
    <div><i class="bi bi-arrow-repeat fs-1"></i></div>
    <div>
      <div>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">
    <div><i class="bi bi-flower1 fs-1"></i></div>
    <div>
      <div>SUSTENTABILIDADE</div>
      <div class="texto-menor ms-3">Moda responsável, que respeita o meio ambiente.</div>
    </div>
  </div>
</div>
`

OBS:não consigo mandar a print

3 respostas
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Tarlei, tudo certo?

Poderia por gentileza compartilhar mais informações sobre o ocorrido? Dessa forma poderei te auxiliar de forma mais assertiva. Qual ícone e texto estão desalinhados? Está se referindo aos textos "pague pelo pix", "troca grátis" e "sustentabilidade"? Caso esteja, tente adicionar as classes dentro dessas divs:

 <div ms-3 mb-1>PAGUE PELO PIX</div>
<div ms-3 mb-1>TROCA GRÁTIS</div>
<div ms-3 mb-1>SUSTENTABILIDADE</div>

Caso isso não resolva, considere compartilhar o seu projeto completo pelo Github.

Fico à disposição.

Um bom dia e bons estudos.

por Tarlei Rodrigues de Oliveira
| 86.4k xp | 14 posts

Olá, acredito que o site não esteja conseguindo carregar a imagem que eu queria colocar, não sei se é por ser .PNG, mas tentei de tudo para carregar a imagem

por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Tarlei.

Que estranho! Arquivos .png deveriam ser upados normalmente, uma possível solução seria utilizar domínios que hospedem imagem, como o Imgur. Nesse caso se certifique de abrir a imagem upada em uma aba separada somente com a imagem, você pode fazer isso clicando com o botão direito e clicando em "abrir imagem em uma nova guia", desse modo pode utilizar o link enfatizando o tipo de arquivo (.png, .jpg, etc) para utilizar em seu projeto.

Fico à disposição.

Tenha um bom dia e bons estudos.