En esta clase, comenzaremos a adaptar nuestro diseño web a la versión de tablet, específicamente al iPad Pro. Ya tenemos la versión móvil casi lista, así que el siguiente paso es asegurar que la experiencia sea fluida y atractiva en dispositivos de mayor tamaño.

Al pasar a la vista de tablet, notaremos de inmediato diferencias en la disposición de los elementos. La cabecera, la sección central y el footer cambiarán, y elementos como el mapa se transformarán en un simple texto "Mostrar mapa".

Para facilitar el proceso, empezaremos por ajustar el footer. Actualmente, nuestro footer tiene una única columna, pero en la versión de tablet deberá tener tres columnas. Además, el menú inferior desaparecerá y ocultaremos el mapa por ahora.

Transformando el Footer

Nos centraremos en el footer y veremos cómo hacer que sus elementos pasen de una disposición vertical a una horizontal. Esto lo lograremos mediante la configuración de las columnas utilizando Grid calls para que en pantallas grandes (LG) pasen de 1 a 3 columnas.

También ajustaremos el padding superior e inferior del footer, ya que en la versión de tablet es significativamente mayor. Identificaremos qué elemento controla este padding y lo ajustaremos para que coincida con el diseño de tablet.

Reorganización del Contenido del Footer

Observaremos que la parte inferior del footer en la versión de tablet tiene un diseño diferente, con elementos centrados y la aparición de iconos de redes sociales. Veremos cómo integrar estos iconos y cómo hacer que se muestren solo en la versión de tablet, ocultándose en la versión móvil.

Ajustaremos el espaciado y la alineación de los elementos dentro del footer para que coincidan con el diseño de tablet, prestando atención a detalles como el margen y la separación entre los iconos. Aunque no buscaremos una réplica pixel-perfecta, el objetivo es lograr una apariencia muy similar y funcional.