@media(max-width:1200px){
.header{
padding: 10%;
}
.header__menu{
justify-content: center;
}
.presentacion{
flex-direction: column-reverse;
padding: 5%;
}
.presentacion__contenido{
width: auto;
}
}
Hola Justin, espero que estés bien
Parece que estás trabajando en la responsividad de tu proyecto. Vamos a repasar lo que has hecho y ver si hay algo que mejorar o ajustar.
Media Queries: Estás utilizando @media(max-width:1200px) para aplicar estilos cuando la pantalla es menor o igual a 1200px de ancho. Esto es útil para dispositivos más pequeños como tablets.
Estilos Aplicados:
.header: Le has dado un padding del 10%. Esto hace que el espacio alrededor del contenido de tu encabezado sea proporcional al tamaño de la pantalla..header__menu: Usar justify-content: center; centra el contenido del menú horizontalmente, lo cual es útil si tienes un menú de navegación..presentacion: Cambiar flex-direction a column-reverse reorganiza los elementos en una columna invertida, lo cual puede mejorar la visualización en pantallas más pequeñas..presentacion__contenido: Al establecer width: auto;, permites que el contenido se ajuste automáticamente al espacio disponible.Verificación: Asegúrate de que tus clases CSS coincidan con las de tu HTML. Si los estilos no se aplican, puede ser debido a un error de coincidencia de clases.
Pruebas: Prueba tu diseño en diferentes tamaños de pantalla para asegurarte de que se vea bien en todos los dispositivos.
Si tienes algún problema específico con cómo se ve o se comporta tu diseño, intenta describirlo un poco más para que podamos ayudarte mejor.
Espero haber ayudado y buenos estudios!