Mon site défile horizontalement sur mobile, comment corriger ça ?

Points clés
• Le défilement horizontal est causé par un élément trop large par rapport à l’écran
• Un seul bloc mal configuré peut casser toute la mise en page mobile
• Quelques réglages suffisent pour retrouver une navigation fluide et performante

Le défilement horizontal sur mobile est un problème courant, mais heureusement très simple à résoudre. Il apparaît lorsqu’un élément dépasse la largeur de l’écran — un bouton, une image, une section mal dimensionnée ou un padding excessif. Cela nuit à l’expérience utilisateur et donne une impression peu professionnelle, surtout pour un site hôtelier où l’ergonomie joue un rôle clé dans la conversion.

Pour commencer, ouvrez votre page dans le Designer et sélectionnez la vue Mobile. Faites défiler vers la droite : dès que la zone blanche apparaît, vous savez qu’un élément dépasse. L’objectif est d’identifier l’élément responsable du débordement.

Les causes les plus fréquentes sont :

1. Une image ou vidéo trop large

• Vérifiez que vos images sont définies en 100 % width
  • Évitez les largeurs fixes (ex : 500px) sur mobile
  • Utilisez “Cover” au lieu de “Contain” si vous avez un background mal géré

2. Un bouton ou un bloc avec padding excessif

Un bouton avec trop de padding horizontal peut dépasser du conteneur.
Solution :
• réduire le padding sur mobile
• utiliser des unités relatives (%, vw) plutôt que des px fixes

3. Une colonne ou grille non adaptée

Les grilles et colonnes peuvent déborder si :
• la largeur minimale (min-width) est trop élevée
• des marges négatives sont utilisées
• les colonnes ne passent pas correctement en stack
Vérifiez chaque colonne et passez en colonne unique si nécessaire.

4. Un texte trop long dans un conteneur trop étroit

Les mots longs (ex : email, URL, nom de chambre sans espace) peuvent forcer un débordement.
Solution : ajouter break-word dans Custom Code ou réduire la taille/text du conteneur.

5. Une interaction ou animation qui déplace un élément hors de son conteneur

Les animations “move” peuvent pousser un bloc en dehors de la page.
Vérifiez vos interactions si le problème apparaît uniquement lors du scroll.

💡 Astuce : utilisez l’inspecteur intégré du navigateur (Chrome mobile simulation). Cliquez sur chaque élément pour voir s’il dépasse de .w-100 ou du viewport.

Comment diagnostiquer rapidement

Utilisez la méthode suivante :

1. Activez la vue Mobile
   
   
2. Sélectionnez la structure principale (Body)
   
   
3. Passez en mode Outline (icône en haut à droite)
   
   
4. Ouvrez chaque section une par une
   
   
5. Surveillez les largeurs rouges ou éléments qui dépassent des cadres bleus
   
   

L’élément qui dépasse est celui à corriger.

Solutions rapides selon les cas

• Passez tous les conteneurs à max-width: 100%
  • Évitez les valeurs “Fixed” en largeur, utilisez “Auto” ou “Stretch”
  • Réduisez le padding horizontal sur mobile (souvent la cause nº1)
  • Utilisez overflow: hidden uniquement sur les sections décoratives (jamais sur toute la page)
  • Réduisez la taille des images ou leur proportion
  • Réorganisez les colonnes en pile (stack)
  • Vérifiez les interactions qui déplacent les éléments

Conclusion

Le défilement horizontal sur mobile vient généralement d’un seul élément trop large. En inspectant votre page section par section, en ajustant les largeurs, paddings et images, vous rétablissez une navigation fluide et haut de gamme, parfaite pour un site hôtelier.