Entrar Ainda não tem acesso?
1
resposta

[Bug] o sustentabilidade não ficou alinhado

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

por Anatalia Santos Lins Candido
| 57.7k xp | 44 posts

Boa tarde, o último ícone ficou desalinhado

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeindex.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meteora</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body>
...

...
    <section class="pb-4">
        <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 class="ms-3 mb-1">PAGUE COM PIX</div>
                    <div class="texto-menor ms-3">Ganhe 5% OFF em Pagementos via PIX.</div>
                </div>
            </div>

            <div class="divs-facilidades d-flex">
                <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">
                <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>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
</body>

</html>
1 resposta
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Anatalia, tudo bem?

O problema que você está enfrentando é que há uma classe divs-facilidades, que contém a propriedade widthpara definir uma largura padrão a todos os itens dessa seção, que não está sendo aplicada. Há dois fatores que você precisa conferir para que essa funcionalidade seja aplicada.

O primeiro deles é garantir que o link do arquivo CSS que foi criado para escrever as classes personalizadas tenha sido feito. Isso pode ser feito por meio da tag <link> Da seguinte maneira:

<link rel="stylesheet" href="./estilos.css">

Lembre-se que no atributo hrefé necessário definir o caminho no qual o arquivo foi salvo. O trecho acima foi retirado do código da aula.

Além disso, você precisa que esse link seja feito dentro da tag <head> após os links que você utilizou para importar o Bootstrap.

Outro ponto a ser considerado é se você de fato adicionou a propriedade widthao arquivo CSS. A propriedade ficaria assim:

.divs-facilidades {
    width: 325px;
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!