Cómo ocultar el pie de página en la vista móvil

Los pies de página personalizados con múltiples columnas, enlaces y elementos de marca están diseñados para pantallas de escritorio anchas. En pantallas móviles estrechas, el mismo pie de página puede parecer estrecho, desbordarse de su contenedor o ocupar un espacio desproporcionado, todo lo cual resta a la experiencia de lectura. Ocultar el pie de página en el móvil te permite mantener un espacio de escritorio rico mientras presentas un diseño limpio y sin complicaciones a los lectores en pantallas más pequeñas.

NOTA

Esto solo aplica a los zapatos personalizados. No tiene efecto en el pie de página predeterminado de Document360. Para información sobre cómo configurar un pie de página personalizado, lee el artículo sobre Pie de página personalizado.

Cuándo usar esto

Utiliza esta personalización cuando quieras:

• Evita que un pié de página complejo y de varias columnas parezca roto o apretado en pantallas móviles.
• Mejora la experiencia de lectura en móvil eliminando contenido de pie de página que no sea útil o accesible en pantallas pequeñas.
• Aplica un diseño responsivo donde el pie de página sea visible en el escritorio pero esté suprimido en el móvil.

Antes de que empieces

• Necesitas acceso a Configuración (
  ) > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.
• Un pie de página personalizado debe estar ya configurado en tu sitio de base de conocimiento. Este CSS oculta el pie de página en el móvil, no crea uno.

Cómo ocultar el pie de página en la vista móvil

1. Navega a Configuración (

   ) > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.

   

2. Desde el panel de navegación izquierdo, selecciona la pestaña CSS y pega el siguiente fragmento.

Oculta el pie de página en pantallas hasta 767px el ancho (smartphones y tabletas más pequeñas).

@media only screen and (max-width: 767px) {
    site-footer-section {
        display: none;
    }
}

3. Haz clic en Guardar en la esquina superior derecha.

   

Resultado

El pie de página está oculto en las pantallas de los móviles y sigue mostrándose en las pantallas de escritorio como de costumbre.

Mejores prácticas

• Ajusta el punto de ruptura para que coincida con tu disposición si es necesario. Si tu pie de página personalizado empieza a parecer problemático a un ancho más ancho o más estrecho que el estándar, cambia el max-width valor en el fragmento. Por ejemplo, también se usa max-width: 1024px para ocultar el pie de página en las tabletas.
• Prueba en un dispositivo real después de guardar. Las herramientas para desarrolladores de navegador ofrecen una vista previa razonable para móviles, pero las pruebas en un smartphone real confirman que el pie de página desaparece en el punto de interrupción correcto y la disposición de la página sigue siendo correcta.
• Piensa en lo que estás ocultando. Si tu pie de página personalizado contiene enlaces importantes, como información de contacto, avisos legales o enlaces de soporte, asegúrate de que estos sean accesibles para los lectores móviles por otros medios, como el encabezado del sitio o la navegación del artículo.
• Para revertir, borra el fragmento. Vuelve a la pestaña CSS en CSS Personalizado & JavaScript, elimina el fragmento y haz clic en Guardar. El pie de página reaparece inmediatamente en el móvil.