¡Hola Matias, espero que estés bien!
Parece que estás trabajando en un proyecto de portafolio y estás enfrentando algunos desafíos con el diseño responsivo. Veamos cómo podemos abordar cada uno de los puntos que mencionaste:
Espacio entre imagen y texto en pantallas más pequeñas: Ya has utilizado la propiedad gap en la clase .presentacion, lo cual es una excelente manera de crear espacio entre los elementos. Asegúrate de que el valor de gap sea suficiente para mantener una separación adecuada incluso en pantallas más pequeñas.
Media query para pantallas menores de 1023px: Ya tienes una media query configurada para pantallas menores de 1200px. Para manejar pantallas más pequeñas, puedes agregar otra media query para 1023px. Dentro de esta media query, puedes cambiar la dirección del flex a column para que la imagen se posicione sobre el texto:
@media (max-width: 1023px) {
.presentacion {
flex-direction: column;
}
}
Orden de los elementos en .presentacion: Ya estás usando flex-direction: column-reverse en tu media query para pantallas menores de 1200px, lo cual debería invertir el orden de los elementos correctamente.
Ajuste del encabezado para pantallas más pequeñas: En la media query para pantallas menores de 1200px, ya has ajustado el padding del .header. Asegúrate de que el valor de padding sea suficiente para centrar el encabezado y que no se desborde.
Centrado de elementos del menú: Ya tienes justify-content: center en la clase .header__menu dentro de la media query, lo cual debería centrar los elementos del menú. Verifica que esta propiedad esté funcionando como esperas.
Refinamiento del diseño del encabezado: Continúa ajustando los valores de padding y justify-content hasta que el encabezado se alinee visualmente con tu diseño en Figma. A veces, pequeños ajustes pueden hacer una gran diferencia.
Espero que estas sugerencias te ayuden a resolver los problemas de diseño responsivo que estás enfrentando. ¡Bons estudios!
