@media (max-width: 1200px){
.cabecalho{
padding: 10%;
}
.cabecalho__menu{
justify-content: center;
}
.apresentacao{
flex-direction: column-reverse; /*para colocar a imagem encima do texto*/
padding: 5%;
}
.apresentacao__conteudo{ /*para a largura dos elementos em tela pequena*/
width: auto; /*com width auto o conteudo acompanha a tela, ela vai seguir o elemento pai em que o padding esta e acompanhar ele*/
}
}
Oii, Thamiris!
Obrigada por compartilhar seu código com a comunidade Alura.
Gostei da forma como você estruturou a responsividade, especialmente ao usar flex-direction: column-reverse; para reorganizar a apresentação em telas menores. Isso melhora a experiência do usuário ao priorizar a exibição da imagem.
Para saber mais:
As media queries permitem criar layouts responsivos ajustando estilos com base no tamanho da tela. No seu código, a propriedade flex-direction: column-reverse; foi utilizada para exibir a imagem acima do texto em telas menores.
Quer aprender mais sobre media queries e responsividade? Confira este artigo:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!