@media (max-width: 1023px){
.apresentacao{
flex-direction: column-reverse;
}
.cabecalho{
padding: 10%;
}
.cabecalho__menu{
justify-content: center;
}
}
@media (max-width: 1023px){
.apresentacao{
flex-direction: column-reverse;
}
.cabecalho{
padding: 10%;
}
.cabecalho__menu{
justify-content: center;
}
}
Olá Ariel!
Pelo que você compartilhou, parece que você está no caminho certo para ajustar o layout responsivo do seu projeto. Vamos dar uma olhada nos pontos que podem ajudar a resolver a sua dúvida:
Espaçamento entre os elementos na .apresentacao: Para garantir que a imagem e o texto não fiquem colados quando a tela diminuir, você pode usar a propriedade gap dentro do seu @media query. Algo assim:
@media (max-width: 1023px) {
.apresentacao {
flex-direction: column-reverse;
gap: 20px; /* Ajuste o valor do gap conforme necessário */
}
}
Ajuste do layout para telas menores: Parece que você já aplicou a flex-direction: column-reverse;, o que está correto para inverter a ordem dos elementos. Certifique-se de que a estrutura HTML está configurada para que a imagem e o texto sejam filhos diretos da classe .apresentacao.
Centralização do cabeçalho e menu: O código que você postou já está centralizando o menu, mas se ainda não estiver como esperado, verifique se a propriedade display: flex; está aplicada na classe .cabecalho__menu. Além disso, o padding: 10%; na .cabecalho deve ajudar a centralizar o cabeçalho, mas você pode ajustar esse valor conforme necessário para melhor alinhamento.
Espero ter ajudado e bons estudos!