Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, Luiz. Como vai?
Analisando a imagem do seu projeto AluraBooks, percebi que você está na fase de estruturar o rodapé e as seções de informações. Esse é um desafio comum quando começamos a trabalhar com Flexbox ou Grid para alinhar ícones e textos.
Para que esses ícones fiquem no lugar correto, a estratégia mais eficaz no CSS é garantir que cada item da lista (ou grupo de informações) seja um container flexível.
Aqui estão algumas dicas práticas para resolver isso:
display: flex e align-items: center no elemento pai que envolve ambos.gap para criar um distanciamento uniforme entre o ícone e o conteúdo textual sem precisar de margens individuais.<ul>), lembre-se de remover os estilos padrões com list-style: none e o padding.Um exemplo de como o seu CSS pode ser estruturado para esses itens:
.lista-rodape__item {
display: flex;
align-items: center;
gap: 0.5rem; /* Ajuste conforme o design */
}
.lista-rodape__link {
text-decoration: none;
color: var(--cor-principal); /* Ou sua variável de cor */
}
Se o problema for os ícones do cabeçalho ou das seções de "Novos Lançamentos" que não estão centralizados nos cards, verifique se o container pai possui um justify-content: center ou se há algum padding sobrando que esteja empurrando o ícone para fora do eixo.
Como você está usando a abordagem mobile-first, certifique-se de que não há um estilo fixo em resoluções menores que esteja impedindo o reposicionamento quando você expande a tela.
Espero que possa ter lhe ajudado!