Barre de défilement horizontale sur mobile : la trouver et la supprimer

Sur ordinateur, votre site est parfait. Mais sur téléphone, quelque chose cloche : la page « flotte », on peut la faire glisser de gauche à droite, et une bande blanche apparaît sur le côté. Parfois, c’est même visible dans l’aperçu mobile d’Elementor. Ce défaut fait amateur, gêne la lecture… et il a toujours la même cause. Voici comment la trouver et la corriger.

Pourquoi ça arrive

Un écran de téléphone fait environ 360 à 430 pixels de large. Si un seul élément de la page est plus large que l’écran, ou dépasse sur le côté, le navigateur agrandit la zone de la page pour le montrer en entier : c’est le « débordement » (overflow en anglais). Résultat : une barre de défilement horizontale.

Il suffit d’un seul élément fautif, parfois minuscule ou même invisible, pour provoquer le problème sur toute la page.

Les coupables les plus fréquents

• Une largeur fixe en pixels : un conteneur, une image ou un tableau réglé à 500 px de large, plus large que l’écran du téléphone.
• Une marge négative ou un élément en position absolue qui dépasse du bord (une forme décorative, un badge).
• Une animation d’entrée latérale (Slide In Right, Fade In Right…) : l’élément part de l’extérieur de l’écran avant d’arriver à sa place.
• Un titre avec un mot très long dans une grande taille de police : le mot ne peut pas être coupé et dépasse.
• Un contenu intégré mal dimensionné : carte Google, vidéo, iframe, carrousel.
• Un espace intérieur (padding) trop grand ajouté à un élément déjà en pleine largeur.

Méthode 1 : le détecteur dans le navigateur (5 minutes)

Pas besoin d’être développeur : on colle un petit code dans le navigateur, et il entoure en rouge les éléments qui dépassent. Ce code ne modifie rien sur votre site, il ne fait qu’afficher un repère sur votre écran.

1. Sur votre ordinateur, ouvrez la page concernée dans Chrome (ou Edge, Firefox).
2. Faites un clic droit n’importe où sur la page, puis Inspecter (ou Ctrl + Maj + I). Un panneau d’outils s’ouvre.
3. Passez en affichage mobile : Ctrl + Maj + M (ou l’icône de téléphone en haut du panneau). Choisissez un modèle de téléphone dans la liste en haut de la page.
4. Dans le panneau d’outils, cliquez sur l’onglet Console.
5. Collez le code ci-dessous et appuyez sur Entrée. (Si le navigateur refuse le collage, il vous demande de taper une phrase d’autorisation : suivez son indication.)

(function (d) {
  var w = d.documentElement.offsetWidth,
      t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT), b;
  while (t.nextNode()) {
    b = t.currentNode.getBoundingClientRect();
    if (b.right > w || b.left < 0) {
      t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
      console.log(t.currentNode);
    }
  }
}(document));

Faites ensuite défiler la page : les éléments qui débordent sont entourés de pointillés rouges. Ils sont aussi listés dans la console : survolez une ligne de la liste, l’élément correspondant s’illumine sur la page. Notez de quel bloc il s’agit (« le bandeau avec la forme orange », « le tableau des tarifs »).

Souvent, plusieurs éléments sont listés parce qu’ils sont imbriqués : le coupable est généralement le plus « profond », ou un élément décoratif.

Méthode 2 : par élimination (sans code)

Si la méthode 1 vous fait peur, procédez par élimination, sans risque pour votre page :

1. Ouvrez la page avec Elementor.
2. Cliquez sur la flèche à côté de Publish, puis Save as Template : vous obtenez une copie de la page.
3. Dans l’administration, ouvrez les modèles enregistrés d’Elementor, et modifiez cette copie avec Elementor.
4. Supprimez les conteneurs un par un, en vérifiant l’aperçu mobile après chaque suppression.
5. Quand la barre horizontale disparaît, le dernier conteneur supprimé est le coupable.

Pas d’inquiétude : tout peut être restauré avec le panneau d’historique, et votre vraie page n’a pas été touchée.

Corriger, selon la cause

Cause	Correction
Largeur fixe en px	passez la largeur en %, ou réglez une largeur différente sur mobile (icône de téléphone à côté du réglage)
Animation qui arrive de la droite	choisissez une animation verticale (Fade In Up) ou None sur mobile
Titre trop grand	réduisez la taille de police sur mobile
Marge négative, élément décoratif	retirez la marge sur mobile, ou masquez l’élément sur mobile (Advanced › Responsive)
Vidéo, carte, iframe	réglez sa largeur à 100 %

La solution de secours : masquer le débordement

Si la cause ne peut pas être corrigée (un effet voulu, par exemple), on peut demander au conteneur de « couper » ce qui dépasse :

1. Sélectionnez le conteneur fautif (ou son conteneur parent).
2. Dans l’onglet Layout, ouvrez Additional Options.
3. Réglez Overflow sur Hidden.

C’est efficace, mais ça cache le symptôme : corriger la cause est toujours préférable, car un contenu coupé peut aussi masquer une partie utile (une ombre, une flèche de carrousel).

Vérifier

• Videz le cache de votre site.
• Testez sur un vrai téléphone, pas seulement dans l’aperçu mobile : en essayant de faire glisser la page vers la gauche, rien ne doit bouger.
• Testez aussi en mode paysage, et sur une tablette.

Pour aller plus loin sur l’affichage mobile, voir rendre un site Elementor responsive.