Solucionado
Olá, estou criando um site: henriqueramos.com.br/mae2 e esta indo tudo bem ate agora em relação a responsividade, porem no celular quando eu deito ele o layout começa a quebrar pois pegar o @media de um width maior e o height dos elementos começam a ficar maior e cada seçao começa a ocupar 100vh, como eu poderia ajeitar isso?
hoje, com a Alura e o Google Gemini
Oi Henrique você deve definir um layout especifico para essa orientação de tela e na sua mediaquerie definir seus estilos. Exemplo:
/* aplica somente a partir de 480px em landscape */
@media screen and (min-width: 480px) and (orientation: landscape) {
nav { float: left; }
}
ou
media="screen and (min-width: 320px) and (orientation: portrait)">Isso pode ser útil para customizar a experiência do site de acordo com como o usuário está segurando o aparelho. É sabido, por exemplo, que um celular em modo retrato é mais usável com navegação na parte de baixo à esquerda; e, no modo paisagem, com navegação no topo e nas laterais.
Para uma leitura completa: Flexibilidade em páginas para dispositivos móveis com media queries
Espero ter ajudado e bons estudos.
Obrigado parece que resolveu tudo certinho