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

[Dúvida] Texto saiu do lugar

O projeto tava certinho, mas quando eu terminei o texto do computador saiu do lugar..

css
lista__item{
    font-size: 32px;
    color: var(--branco);
}
.rodape{
    text-align: center;
    margin: 4em 3em;
}
.rodape__logo{
    margin-bottom: 2em;
}

.rodape__lista{
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 1em;
    gap: 1em;
}
.lista__link{
    display: flex;
    justify-content: center;
    color: #FFFFFF;

} 
.lista__link > a{
    text-decoration: none;
    color: var(--branco);
    font-size: 16px;
    margin-left: 1em;
}

.rodape__texto{
    font-size: 14px;
    margin: 1em;
    text-align: center;
    color: var(--cinza-secundario);
}

.a{
    text-decoration: none;
    color: var(--branco);
}
4 respostas

Olá, Heloísa.

Tudo bem?

Compartilha o seu código HTML também por gentileza, assim conseguimos testar e ver se tem algum detalhe no HTML ou no CSS.

Valeu.

html e como aparece pra mim:

<section class="dispositivos">
        <h2 class="dispositivos__titulo">Dsiponível nos seus dispositivos favoritos</h2>
        <ul class="dispositivos__lista">
            <li> 
                <img src="./images/tv.svg" alt="Imagem de uma televisão">
                <h3> Televisão</h3> </li>
            <li> 
                <img class="itens_icons" src="./images/computador.svg" alt="Imagem de um computador">
                <h3>Computadores</h3>  </li>
        <li> 
            <img src="./images/celular.svg" alt="Imagem de um celular">
            <h3> Celulares e tablets </h3></li>
        </ul>
    </section>

<footer class="rodape">
    <img class="rodape__logo" src="./images/Logo.png" alt="logo Alura Plus">
        <ul class="rodape__lista">
            <li class="lista__link">
                <a href="#">Idioma </a> 
            </li>
            <li class="lista__link">
                <a href="#"> Dispositivos compatíveis </a>
            </li>
            <li class="lista__link">
                <a href="#"> Contrato de assinatura</a>
            </li>
            <li class="lista__link">
                <a href="#">Política de privacidade </a>
            </li>
            <li class="lista__link">
                <a href="#">Proteção de dados no Brasil </a>
            </li>
            <li class="lista__link">
                <a href="#">Anúncios personalizados </a>
            </li>
            <li class="lista__link">
                <a href="#">Ajuda </a>
            </li>
        </ul>
   <p class="rodape__texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
<p class="rodape__texto"> Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
</footer>
</body>
</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Você adicionou uma classe chamada "itens_icons" a esse item, olha:

<li> 
                <img src="./images/tv.svg" alt="Imagem de uma televisão">
                <h3> Televisão</h3> </li>
            <li> 
                <img class="itens_icons" src="./images/computador.svg" alt="Imagem de um computador">
                <h3>Computadores</h3>  </li>
        <li> 
            <img src="./images/celular.svg" alt="Imagem de um celular">
            <h3> Celulares e tablets </h3></li>

Remova ela que deve resolver

Era isso mesmo kkkk, obrigada!