1
resposta

[Sugestão] Solução para colunas desiguais no rodapé

Fiquei angustiada que as colunas no rodapé estavam levemente desiguais em suas larguras, além de não estarem alinhando com o elemento logo acima. Consegui uma solução transformando o elemento em grid ao invés de flex. Coloquei abaixo o código para quem também se incomodou com isso!

Print da tela mostrando o rodapé

É necessário criar uma div extra entre o footer e o conteúdo para que o background não desconfigure (chamei de rodape__card). Também precisa acertar o padding, coloquei 1em no .rodape__titulo para tela de 1024px e 4em para 1728px.

        <footer class="rodape">
            <div class="rodape__card">
                <h2 class="rodape__titulo">Grupo Alura</h2>
                <ul class="lista-rodape">
                    <li class="lista-rodape__titulo">Educação</li>
                    <li class="lista-rodape__item">
                        <img src="img/Caelum.png" alt="Logo da Caelum">
                        <a href="#" class="lista-rodape__link">Caelum</a>
                    </li>
                    ...
                </ul>
            </div>
        </footer>
@media screen and (min-width: 1024px) {
    .rodape__card {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;      
        margin: 0 auto;      
    }
}

    @media screen and (min-width: 1728px) {
    .rodape__card {
        max-width: 90%; 
    }
}
1 resposta

Oi Danielle, tudo bem?

Muito obrigada por compartilhar com a gente a sua solução! Muito legal essa sua atitude de vir até aqui compartilhar com todo mundo e explicar o que fez direitinho, com certeza vai ajudar outras pessoas. :D

Parabéns!

Um abraço e bons estudos.