código CSS completo - parametrizado y con comentarios (documentacion codigo)
/* 1) Ajustando el diseño para pantallas más pequeñas con 'gap' /
/
La propiedad 'gap' nos permite crear un espacio uniforme entre los
elementos flexbox o grid, sin necesidad de usar márgenes,
lo que simplifica mucho el diseño responsivo.
/
.presentacion {
display: flex; / Asegúrate de que .presentacion es un contenedor flex /
gap: 3.125rem; / Crea un espacio de 50px entre el texto y la imagen /
align-items: center; / Centra los elementos verticalmente para mejor estética */
}
/* 2) Implementando media queries para cambios en el diseño /
/
Esta media query se activa cuando el ancho de la pantalla es
menor a 1023px. Aquí ajustamos la dirección del contenedor
a 'column' para que los elementos se apilen verticalmente,
como en el diseño móvil.
*/
@media (max-width: 1023px) {
.presentacion {
flex-direction: column;
}
}
/* 3) Refinando el diseño responsivo con 'column-reverse' /
/
Para asegurarnos de que la imagen aparezca antes que el texto
en el diseño móvil (como en Figma), usamos 'column-reverse'.
Esto invierte el orden de los elementos apilados.
Esta media query se activa para anchos de pantalla menores a 1200px.
*/
@media (max-width: 1200px) {
.presentacion {
flex-direction: column-reverse;
}
}
/* 4) y 6) Ajustando y refinando el encabezado para pantallas más pequeñas /
/
Este ajuste de 'padding' es crucial para que el encabezado no
se desborde y tenga el espacio adecuado en dispositivos móviles.
Los valores se ajustan para centrarlo visualmente y darle
un aspecto profesional.
/
.encabezado {
padding: 0.625rem 1.25rem; / Ajusta el 'padding' superior/inferior y el de los lados */
}
/* 5) Centrando elementos del menú en pantallas más pequeñas /
/
Con 'justify-content: center', centramos horizontalmente
los elementos del menú ('Inicio' y 'Sobre mí') dentro
del contenedor flex 'header__menu'. Esto asegura una
distribución equitativa y centrada.
/
.header__menu {
display: flex; / Asegúrate de que ya está o agrégalo si no existe /
justify-content: center; / Centra los elementos horizontalmente /
gap: 2rem; / Opcional: añade un espacio entre los enlaces del menú */
}
/*
Ajustes finales del encabezado para un mejor diseño responsivo
en pantallas más pequeñas.
*/
@media (max-width: 768px) {
.encabezado {
padding: 0.625rem 1rem;
}
}
