Espacio entre imagen y texto (.presentacion)
.presentacion{
display: flex; /* si aún no lo tienes /
align-items: center; / opcional /
gap: 32px; / espacio entre hijos (imagen/texto) */
}Media query: en < 1023px apilar en columna
@media (max-width: 1023px){
.presentacion{
flex-direction: column; /* apila elementos en pantallas pequeñas */
}
}
(En el siguiente paso invertiremos el orden para que la imagen quede arriba, como en Figma.)
- Media query: invertir orden en < 1200px
Coloca este bloque después del anterior para que tenga prioridad cuando ambos apliquen.
@media (max-width: 1200px){
.presentacion{
flex-direction: column-reverse; /* imagen arriba, texto abajo */
}
}
Ajustar el encabezado (.encabezado) en pantallas pequeñas
@media (max-width: 1023px){
.encabezado{
padding: 16px 5%; /* más centrado y con aire superior/lateral */
}
}Centrar elementos del menú (.header__menu)
.header__menu{
display: flex; /* verificar que esté aplicado /
justify-content: center; / centra "Inicio" y "Sobre mí" /
gap: 16px; / opcional: separación entre items */
}
Si solo quieres centrar en pantallas pequeñas, mueve estas reglas dentro del @media (max-width: 1023px).
- Refinar el encabezado (tunea padding y flex según Figma)
Ejemplo de refinamiento conjunto:
@media (max-width: 1023px){
.encabezado{
padding: 20px 6%; /* prueba 16–24px y 5–8% /
}
.header__menu{
justify-content: center; / prueba también: space-around / space-evenly /
gap: 20px; / ajusta separación visual */
}
}
Tip de verificación: abre las DevTools y prueba distintos anchos (por ejemplo 1300px, 1020px y 700px) para confirmar:
gap separa imagen/texto,
en <1200px la imagen queda arriba,
en <1023px el header queda centrado y limpio.
