- Ajustando el diseño para pantallas más pequeñas: Para asegurarte de que los elementos de tu página no se solapen cuando reduces el tamaño de la pantalla, agrega espacio entre el contenido y la imagen. Utiliza la propiedad gap en la clase .presentacion para crear un espacio adecuado entre estos elementos.
css Copiar Editar .presentacion { display: flex; gap: 20px; /* Ajusta el valor según sea necesario */ } 2. Implementando media queries para cambios en el diseño: Cuando el ancho de la pantalla sea menor de 1023px, debes hacer que la imagen se posicione sobre el texto, de acuerdo con el diseño móvil en Figma. Utiliza una media query para ajustar la disposición de los elementos a una columna en pantallas más pequeñas:
css Copiar Editar @media (max-width: 1023px) { .presentacion { flex-direction: column; } } 3. Refinando el diseño responsivo: Si el orden de los elementos no está conforme al diseño de Figma y necesitas que la imagen aparezca sobre el texto cuando la pantalla sea inferior a 1200px, puedes utilizar flex-direction: column-reverse dentro de una media query para invertir el orden de los elementos:
css Copiar Editar @media (max-width: 1200px) { .presentacion { flex-direction: column-reverse; } } 4. Ajustando el encabezado para pantallas más pequeñas: Para evitar que el encabezado se desborde o quede demasiado a la izquierda, ajusta el padding de la clase .encabezado para que esté más centrado y tenga un espacio adecuado en la parte superior de la pantalla:
css Copiar Editar .encabezado { padding-left: 20px; /* Ajusta los valores según sea necesario */ padding-right: 20px; padding-top: 10px; } 5. Centrando elementos del menú en pantallas más pequeñas: Para centrar los elementos "Inicio" y "Sobre mí" dentro del encabezado, utiliza flexbox en la clase .header__menu. Asegúrate de que la propiedad display: flex esté aplicada y luego agrega justify-content: center para alinear los elementos centralmente:
css Copiar Editar .header__menu { display: flex; justify-content: center; } 6. Refinando el diseño responsivo del encabezado: Verifica y ajusta los valores de padding y las propiedades de flexbox en el encabezado para que se alinee correctamente con el diseño de Figma en pantallas pequeñas. Prueba diferentes valores para obtener el mejor resultado:
css Copiar Editar @media (max-width: 1023px) { .encabezado { padding-left: 20px; padding-right: 20px; padding-top: 15px; }
.header__menu {
justify-content: center;
}
}
