@media (max-width: 1200px) {
.cabecalho {
padding: 10%;
}
.cabecalho__menu {
justify-content: center;
}
.apresentacao {
flex-direction: column-reverse;
}
}
@media (max-width: 1200px) {
.cabecalho {
padding: 10%;
}
.cabecalho__menu {
justify-content: center;
}
.apresentacao {
flex-direction: column-reverse;
}
}
Oi, Harlen! Como vai?
Agradeço por compartilhar seu código com a comunidade Alura.
Gostei de ver que você utilizou o @media (max-width: 1200px) para adaptar o layout e aplicou flex-direction: column-reverse; na classe .apresentacao, isso mostra que você entendeu como reorganizar os elementos para melhorar a experiência em telas menores. Centralizar o menu com justify-content: center; também ajuda bastante na responsividade.
Uma dica interessante para o futuro é utilizar a propriedade flex-wrap quando quiser permitir que os elementos quebrem linha automaticamente em telas menores. Veja este exemplo:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px;
}
Nesse código, flex-wrap: wrap permite que os elementos quebrem para a linha de baixo quando não houver espaço suficiente, deixando o layout mais adaptável.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!