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!
Tentei fazer o desafio sozinho mas não consegui. Então entrei no github e copiei o código que a professora fez da section "categories". Mas mesmo após copiar o HTML e CSS dessa parte meu layout ficou errado (imagem abaixo).
Meu projeto no GitHub: https://github.com/Dalmeoli/jornadaviagens
Fiz um commit "ERRO nas categorias" que está com o código que eu coloquei.
Meu código:
Oi Samuel, tudo bem?
Vi seu código e encontrei três problemas: todos no categories.css. Vou explicar cada um, porque acho que vai te ajudar a entender melhor o que estava acontecendo por trás do layout quebrado.
No copia-e-cola, ficou faltando a parte de baixo do arquivo, que é justamente a que faz a mágica de mudar o layout conforme a tela cresce. Sem ela, a regra flex-direction: column nunca virava row, então os cards ficavam sempre empilhados em uma coluna só, não importa o tamanho da tela.
O que mudou: adicionei de volta as três @media (768px, 1024px e 1440px) que fazem os cards passarem de coluna pra linha e ajustam a largura de cada card conforme o breakpoint. Também faltava o ajuste de largura do .section-title (que muda de 312px fixo no mobile pra 100% a partir do tablet).
Repara que cada ícone (caminhada, avião, ônibus, planeta) tem um tamanho diferente no arquivo PNG original. Sem nenhuma regra de layout dentro do card, a <img> e o <h3> simplesmente se empilhavam na ordem do HTML — então quanto maior o ícone, mais pra baixo o texto era empurrado. Por isso quando mudei algumas regras no css o "Pacotes Nacionais" e "Pacotes Internacionais" não ficavam na mesma altura.
O que mudou: transformei o .card num container flex (display: flex; flex-direction: column) e usei justify-content: flex-end. Isso faz o conteúdo do card ser sempre "ancorado" na base, ou seja, não importa a altura do ícone, o texto sempre vai parar exatamente no mesmo lugar em todos os cards.
Esse foi consequência do ajuste anterior: como o texto agora fica grudado embaixo, um ícone muito alto (o da caminhada tem 144px de altura, o do avião 134px) não cabia mais no espaço que sobrava dentro do card de 220px e como não existia limite de altura pra imagem, ela "empurrava" pra fora da borda arredondada, ficando cortada visualmente.
O que mudou: adicionei max-height: 80px na imagem dentro do card. Isso reduz só os ícones grandes demais (mantendo a proporção, sem distorcer), sem esticar os que já são pequenos, como o do ônibus.
Testa aí com essas três mudanças no seu categories.css e me avisa se ficou certinho!
.categories-cards {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-top: 64px;
}
.categories-cards .card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 16px;
width: 312px;
height: 220px;
background-color: var(--background-secondary-color);
text-align: center;
border-radius: 16px;
padding: 24px;
box-sizing: border-box;
text-decoration: none;
color: var(--text-primary-color);
}
.categories-cards .card img {
max-height: 80px;
}
.categories .section-title {
width: 312px;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.categories-cards {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.categories .section-title {
width: 100%;
}
}
@media screen and (min-width: 1024px) {
.categories-cards .card {
width: 430px;
}
}
@media screen and (min-width: 1440px) {
.categories-cards .card {
width: 280px;
}
}
Como ficou:
Espero ter te ajudado.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!