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!
O layout na section categories de 1024 não esta alinhando
Sistema operacional: windows
Programa : Vscode
Duvida: O layout dos cards não estão ficando alinhados na configuração de 1024, ja tentei aumentar o widht no css, mas não fica alinhado independete do valor que eu coloque
github: https://github.com/igorrodrigues-ira/jornada-viagens
Oi, Igor!
O problema não está no valor do width, e sim em onde ele está sendo aplicado. No seu CSS, a regra de 1024px está alterando a largura do container .categories-cards, e não dos cards. Por isso o alinhamento acaba ficando desalinhado.
Troque essa parte:
@media screen and (min-width: 1024px){
.categories-cards{
width:430px;
}
}
Por esta:
@media screen and (min-width: 1024px) {
.categories-cards {
max-width: 960px;
margin: 0 auto;
}
.categories-cards .card {
width: 430px;
}
}
O ponto principal é: o width precisa ser aplicado em cada .card, enquanto o container deve ter uma largura máxima para centralizar os itens. Assim, no breakpoint de 1024px, os cartões conseguem se organizar melhor em duas colunas.
Esse ajuste pode ser feito diretamente no categories.css.
Bons estudos!
Sucesso ✨
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!