- Adaptando imágenes para diferentes tamaños de pantalla: Primero, añade la clase presentacion__imagen a las imágenes relevantes en el HTML. Luego, en el archivo CSS, define el ancho de esta clase como 50%, de esta forma las imágenes ocuparán el 50% del ancho de su contenedor. Esto ayuda a garantizar que las imágenes se adapten a diferentes tamaños de pantalla. Asegúrate de probar en diferentes anchos de pantalla (por ejemplo, 720px) para verificar si la imagen se ajusta correctamente.
css Copiar Editar .presentacion__imagen { width: 50%; } 2. Ajustando el diseño para diferentes dispositivos: Utiliza la herramienta "Inspeccionar" del navegador para simular diferentes tamaños de pantalla, como los de un portátil o dispositivos móviles. Asegúrate de que el diseño se ajuste correctamente en pantallas más pequeñas. Esto puede implicar la modificación de márgenes, rellenos y la reorganización de los elementos en la página. Prueba la responsividad en varias resoluciones y realiza los ajustes necesarios para que todo se vea bien.
- Responsividad del contenido de texto: Para asegurarte de que el contenido de texto se adapte bien a pantallas más pequeñas, ajusta la clase .presentacion__contenido en el archivo CSS. En lugar de usar anchos fijos, utiliza un valor relativo, como el 50%, para que el contenido ocupe la mitad del contenedor en pantallas más grandes, pero se adapte a pantallas más pequeñas. Esto ayudará a que el texto se ajuste mejor en dispositivos con pantallas pequeñas.
css Copiar Editar .presentacion__contenido { width: 50%; } 4. Mejorando la responsividad de los enlaces de navegación: Los enlaces de navegación deben ser fácilmente accesibles en todas las pantallas. Ajusta la clase .presentacion__enlaces__link en el CSS, cambiando el ancho de los enlaces a un valor relativo, como 50%. Esto hará que los enlaces se ajusten bien al tamaño del contenedor en pantallas pequeñas. Verifica cómo responden los enlaces a los cambios y ajusta el diseño según sea necesario para garantizar una navegación fluida y accesible.
css Copiar Editar .presentacion__enlaces__link { width: 50%; }
