présente
Le
no-code France 🇫🇷
Membre du Club

Créez votre compte CORIACE

La plateforme dédiée au no-code, 100 française
  • Des initiations Webflow et Figma 100% offerte

  • Des formations avancées pour developper vos compétences sur les outils

  • Le programme d'affiliation no-code le plus rentable du marché

Rejoindre maintenant
+ 4000 no-codeurs
Noté
par nos étudiants

Créez votre compte CORIACE

La plateforme dédiée au no-code, 100 française
  • Des initiations Webflow et Figma 100% offerte

  • Des formations avancées pour developper vos compétences sur les outils

  • Une communauté Discord pour progresser ensemble

  • Le programme d'affiliation no-code le plus rentable du marché

Rejoindre maintenant
+ 4000 no-codeurs
Noté
par nos étudiants

FAQ Webflow et Figma

Comment retirer le scroll horizontal sur un site Webflow ?

Vous rencontrez des problèmes de scroll horizontal sur votre site web ? Apprenez à les résoudre rapidement en identifiant les éléments responsables avec une technique simple et efficace. Suivez notre guide pour améliorer l'expérience utilisateur de votre site.

Publié le
27/7/24
•  Durée de lecture :
7 min
Table des matières

Le scroll horizontal non désiré sur un site web peut être une véritable nuisance, affectant l'expérience utilisateur et la lisibilité du contenu. Dans cet article, nous allons vous montrer comment identifier et corriger facilement ce problème grâce à une méthode simple et efficace.

Résumé de la Méthode

Pour résoudre le problème de scroll horizontal sur votre site web, utilisez une astuce CSS pour identifier les éléments qui dépassent la largeur de la page. En appliquant une bordure temporaire à tous les éléments, vous pouvez repérer le coupable et ajuster les styles pour éliminer le scroll horizontal.

Étape 1 : Identifier le Problème

  1. Détecter le Scroll Horizontal :
    • Faites défiler horizontalement sur votre site pour constater la présence de scroll.
    • Notez que le problème peut ne pas être immédiatement visible si aucun élément ne semble dépasser visuellement.

Étape 2 : Utiliser un Code CSS pour Identifier l'Élément Problématique

  1. Ajouter un Code Embed :
    • Allez dans les paramètres de votre page ou utilisez un code embed directement dans le body.
  2. Appliquer la Propriété CSS :
    • Insérez le code suivant :
Code CSS pour ajouter des bordures à tous les élément de son site Web
  1. Ce code ajoute une bordure rouge autour de tous les éléments, ce qui aide à identifier ceux qui dépassent.

Étape 3 : Identifier et Corriger le Problème

  1. Repérer l'Élément Dépassant :
    • Faites défiler horizontalement à nouveau pour voir quel élément dépasse la largeur de la page.
  2. Corriger le Style CSS :
    • Accédez au parent de l'élément problématique.
    • Appliquez overflow: hidden; ou ajustez les dimensions de l'élément pour éviter le dépassement.

Le scroll horizontal indésirable peut être facilement corrigé en identifiant l'élément problématique à l'aide d'une bordure rouge temporaire. En ajustant les styles CSS des éléments concernés, vous pouvez améliorer l'expérience utilisateur et la présentation générale de votre site web.

Partager l'article :
Formez-vous maintenant !
Nos SUPER Abonnements
Tous niveaux
Devenez un expert Webflow à partir de 37€ seulement !
Formation 100% Offerte
Accédez à une initiation Webflow 100% OFFERTE maintenant !