Comment masquer le pied de page dans la vue mobile

Les pieds de page personnalisés avec plusieurs colonnes, liens et éléments de marque sont conçus pour des écrans de bureau larges. Sur des écrans mobiles étroits, le même pied de page peut sembler exigu, déborder de son conteneur ou occuper une quantité disproportionnée de place, ce qui nuit à l’expérience de lecture. Masquer le pied de page sur mobile permet de conserver un pied de page de bureau riche tout en présentant une mise en page propre et dégagée aux lecteurs sur des écrans plus petits.

NOTE

Cela s’applique uniquement aux fondations personnalisées. Cela n’a aucun effet sur le pied de page par défaut de Document360. Pour des informations sur la configuration d’un pied de page personnalisé, lisez l’article sur le pied de page personnalisé.

Quand utiliser cela

Utilisez cette personnalisation lorsque vous souhaitez :

• Évitez qu’un pied de page complexe et multi-colonnes ne paraisse cassé ou exigu sur les écrans mobiles.
• Améliorez l’expérience de lecture mobile en supprimant le contenu de bas de page qui n’est pas utile ou accessible sur de petits écrans.
• Applique une mise en page responsive où le pied de page est visible sur le bureau mais supprimé sur mobile.

Avant que tu commences

• Vous avez besoin d’accéder aux paramètres (
  ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.
• Un pied de page personnalisé doit déjà être configuré sur votre site de base de connaissances. Ce CSS masque le pied de page sur mobile, il n’en crée pas.

Comment masquer le pied de page dans la vue mobile

1. Naviguer dans les paramètres (

   ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.

   

2. Dans le panneau de navigation de gauche, sélectionnez l’onglet CSS et collez le extrait suivant.

Cache le pied de page sur des écrans jusqu’à 767px des écrans trop larges (smartphones et petites tablettes).

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

3. Cliquez sur Enregistrer en haut à droite.

   

Conséquences

Le pied de page est caché sur les écrans mobiles et continue d’apparaître sur les écrans de bureau comme d’habitude.

Meilleures pratiques

• Ajustez le point de rupture pour correspondre à votre disposition si besoin. Si votre fondation personnalisée commence à poser problème à une largeur plus large ou plus étroite que la valeur par défaut, changez la max-width valeur dans le extrait. Par exemple, il faut max-width: 1024px également masquer le pied de page sur les tablettes.
• Testez sur un vrai appareil après avoir sauvegardé. Les outils de développement de navigateurs offrent une prévisualisation mobile raisonnable, mais les tests sur un smartphone réel confirment que le pied de page disparaît au bon point d’arrêt et que la mise en page reste correcte.
• Réfléchissez à ce que vous cachez. Si votre pied de page personnalisé contient des liens importants, tels que des coordonnées, des avis légaux ou des liens de soutien, assurez-vous qu’ils soient accessibles aux lecteurs mobiles par d’autres moyens, comme l’en-tête du site ou la navigation de l’article.
• Pour revenir en arrière, supprimez l’extrait. Retournez à l’onglet CSS dans CSS personnalisé & JavaScript, supprimez l’extrait et cliquez sur Enregistrer. Le pied de page réapparaît immédiatement sur mobile.