@media(max-width:1200px){
.header{
padding: 10%;
}
.header__menu{
justify-content: center;
}
.presentacion{
flex-direction: column-reverse;
}
}
@media(max-width:1200px){
.header{
padding: 10%;
}
.header__menu{
justify-content: center;
}
.presentacion{
flex-direction: column-reverse;
}
}
Hola Justin, espero que estés bien
Veo que estás trabajando con media queries para hacer tu diseño más responsivo. El código que compartiste está configurado para aplicar ciertos estilos cuando el ancho de la pantalla es de 1200px o menos. Aquí te dejo algunos consejos para asegurarte de que tu diseño sea lo más responsivo posible:
Verifica los selectores: Asegúrate de que los selectores .header, .header__menu y .presentacion estén correctamente aplicados en tu HTML. Si los nombres de las clases no coinciden exactamente, los estilos no se aplicarán.
Prueba en diferentes dispositivos y tamaños de pantalla: Asegúrate de probar tu diseño en diferentes dispositivos o simuladores de pantalla para ver cómo se comporta. Puedes usar las herramientas de desarrollo de tu navegador para ajustar manualmente el tamaño de la ventana y observar los cambios.
Flexbox y Grid: Parece que estás usando Flexbox para la clase .presentacion. Asegúrate de que el contenedor padre tenga display: flex; aplicado para que las propiedades de Flexbox funcionen correctamente.
Consistencia en el diseño: Considera cómo los cambios en el padding y la justificación del contenido afectan el diseño general. A veces, pequeños ajustes pueden tener un gran impacto visual.
Si después de estos consejos sigues teniendo problemas, intenta revisar si hay otros estilos que puedan estar sobrescribiendo tus media queries.
Espero haber ayudado y buenos estudios!