- Ajustando el espaciado para pantallas más pequeñas Para mejorar el espaciado en pantallas más pequeñas, debes ajustar el padding de la clase .presentacion en tu archivo CSS. Aquí está el proceso:
Abre tu archivo CSS (por lo general llamado style.css).
Localiza el bloque de código CSS que corresponde a pantallas de hasta 1200px de ancho. Esto usualmente se encuentra dentro de una regla @media para pantallas más pequeñas.
@media (max-width: 1200px) {
.presentacion {
/* Otras propiedades */
padding: 5%;
}
/* Otras reglas */
}
Ajusta el padding a 5% para todos los lados. El código completo debería verse así
@media (max-width: 1200px) {
.presentacion {
flex-direction: column-reverse;
padding: 5%;
}
/* Otras reglas */
}
- Refinando el ancho del contenido en dispositivos más pequeños Una vez que el padding ha sido ajustado, es probable que también necesites ajustar el ancho del contenido para que se ajuste al nuevo espaciado.
Abre el archivo CSS y localiza el bloque de código CSS para pantallas de hasta 1200px, como hiciste antes.
Encuentra la clase .presentacion__contenido dentro de este bloque @media.
Define el width de esta clase como auto. El código debería verse así:
@media (max-width: 1200px) {
/* Otras reglas */
.presentacion__contenido {
width: auto;
}
}
- Evaluando el efecto de width: auto en dispositivos más pequeños Después de realizar los cambios en tu archivo CSS, verifica cómo se ve el sitio en el navegador.
Abre tu sitio web en el navegador.
Utiliza las herramientas de desarrollo del navegador (generalmente accesibles con F12 o haciendo clic derecho y seleccionando "Inspeccionar").
Navega a la pestaña de "Elementos" o "Inspector" y selecciona el elemento con la clase .presentacion__contenido. Observa cómo se adapta el ancho al padding del 5% aplicado. Verifica si el contenido se ajusta correctamente. Si el contenido sigue teniendo problemas de ajuste, podrías necesitar ajustar otros valores en el CSS.
