- Ajustando el diseño para pantallas más pequeñas Problema: Al reducir el tamaño de la pantalla, los elementos, como las imágenes y el texto, se pegan entre sí.
Solución: Utiliza la propiedad gap para añadir un espacio entre la imagen y el texto dentro de la clase .presentacion.
CSS:
css Copiar código .presentacion { display: flex; flex-wrap: wrap; /* Asegura que los elementos no se desborden / gap: 20px; / Espacio entre los elementos / align-items: center; / Alinea los elementos verticalmente */ } Este código asegurará que haya un espacio de 20px entre la imagen y el texto, mejorando la presentación en pantallas más pequeñas.
- Implementando media queries para cambios en el diseño Problema: Cuando la pantalla tiene un ancho menor de 1023px, la imagen en el portafolio se queda aislada en el lado derecho.
Solución: Utiliza una media query para modificar la disposición de los elementos en .presentacion a una columna cuando la pantalla sea menor que 1023px.
CSS:
css Copiar código @media (max-width: 1023px) { .presentacion { flex-direction: column; /* Cambia el layout a una columna / align-items: center; / Centra los elementos horizontalmente */ } } Con esta media query, cuando el ancho de la pantalla sea menor de 1023px, los elementos dentro de .presentacion se apilarán verticalmente, con la imagen sobre el texto.
- Refinando el diseño responsivo Problema: El orden de los elementos en la clase .presentacion no sigue el diseño de Figma, donde la imagen debería aparecer sobre el texto.
Solución: Cambia el orden de los elementos utilizando flex-direction: column-reverse en una media query.
CSS:
css Copiar código @media (max-width: 1200px) { .presentacion { flex-direction: column-reverse; /* Invierte el orden de los elementos */ } } Esto asegurará que, cuando la pantalla sea menor de 1200px, la imagen se coloque sobre el texto, siguiendo el diseño en Figma.
- Ajustando el encabezado para pantallas más pequeñas Problema: El encabezado (header) está demasiado a la izquierda y se desborda en ciertos puntos.
Solución: Ajusta el padding de la clase .encabezado para centrarlo y darle espacio en la parte superior.
CSS:
css Copiar código .encabezado { padding: 20px 15px; /* Ajusta el padding para centrar el contenido / text-align: center; / Centra el texto / box-sizing: border-box; / Asegura que el padding no afecte el tamaño total */ } Este ajuste asegurará que el encabezado esté mejor centrado y con un espacio adecuado en la parte superior en pantallas más pequeñas.
- Centrando elementos del menú en pantallas más pequeñas Problema: Los elementos "Inicio" y "Sobre mí" no están centrados dentro del encabezado.
Solución: Utiliza flexbox en la clase .header__menu para centrar los elementos.
CSS:
css Copiar código .header__menu { display: flex; justify-content: center; /* Centra los elementos dentro del contenedor / align-items: center; / Alinea los elementos verticalmente */ } Si display: flex ya está aplicado, solo necesitas añadir justify-content: center para alinear los elementos centralmente.
- Refinando el diseño responsivo del encabezado Problema: El encabezado necesita ajustes adicionales en pantallas más pequeñas.
Solución: Realiza ajustes adicionales en el padding y en las propiedades de flexbox para obtener el mejor resultado.
CSS:
css Copiar código @media (max-width: 768px) { .encabezado { padding: 15px 10px; /* Ajusta el padding para pantallas más pequeñas / justify-content: center; / Asegura que el contenido esté centrado */ } } Juega con los valores de padding y justify-content hasta que el encabezado esté alineado según el diseño de Figma.
