Haga lo que hicimos | HTML y CSS: trabajando con responsividad y publicación de proyectos | Alura Latam

En esta etapa del proyecto, aprendí a aplicar Media Queries para adaptar el diseño a diferentes tamaños de pantalla. También ajusté el encabezado y los enlaces del menú para que se vean bien en dispositivos móviles. Además, personalicé el contenido del portafolio para que refleje mi identidad como desarrollador. Usar flex-direction, gap y padding me permitió lograr una estructura más limpia y responsiva.

1) Espacio entre imagen y texto

.presentacion {
  gap: 82px;
}

2) Cambiar diseño en pantallas menores a 1023px

@media (max-width: 1023px) {
  .presentacion {
    flex-direction: column;
  }
}

3) Invertir orden de elementos en pantallas menores a 1200px

@media (max-width: 1200px) {
  .presentacion {
    flex-direction: column-reverse;
  }
}

4) Ajustar encabezado

@media (max-width: 1200px) {
  .header {
    padding: 10%;
  }
}

5) Centrar elementos del menú

@media (max-width: 1200px) {
  .header__menu {
    justify-content: center;
  }
}

¡Hola Estudiante, espero que estés bien!

Parece que estás haciendo un gran trabajo adaptando tu proyecto de portafolio para que sea responsivo y se vea bien en diferentes tamaños de pantalla. Vamos a revisar cada uno de los puntos que mencionaste para asegurarnos de que todo esté funcionando como esperas.

Espacio entre imagen y texto: Estás utilizando la propiedad gap en la clase .presentacion, lo cual es una excelente manera de crear espacio entre los elementos cuando usas display: flex. Asegúrate de que la clase .presentacion tenga display: flex aplicado, ya que gap solo funciona con flexbox o grid.
Cambiar diseño en pantallas menores a 1023px: Has implementado una media query para cambiar flex-direction a column, lo cual es correcto para colocar la imagen sobre el texto en dispositivos más pequeños. Asegúrate de que no haya otras reglas CSS que puedan estar sobrescribiendo esta media query.
Invertir orden de elementos en pantallas menores a 1200px: Usar flex-direction: column-reverse es una buena solución para invertir el orden de los elementos. Nuevamente, verifica que no haya otras reglas que puedan estar interfiriendo con esta media query.
Ajustar encabezado: Cambiar el padding del encabezado en pantallas más pequeñas es una buena práctica para asegurarte de que el contenido esté bien centrado y no se desborde. Puedes ajustar el valor del padding según sea necesario para que se alinee con el diseño que deseas.
Centrar elementos del menú: Utilizar justify-content: center dentro de .header__menu es una excelente manera de centrar los elementos del menú. Asegúrate de que display: flex esté aplicado a .header__menu para que justify-content funcione correctamente.

Parece que estás en el camino correcto con tus ajustes de CSS. Si algo no está funcionando como esperas, verifica si hay otras reglas CSS que puedan estar afectando tus estilos. También es útil revisar el diseño en diferentes dispositivos o usar herramientas de desarrollo en el navegador para ajustar y probar los cambios en tiempo real.

Espero haber ayudado y buenos estudios!