Site Elementor décalé sur mobile : trouver ce qui déborde et le corriger 📱

Le symptôme est toujours le même : sur smartphone, la page bouge latéralement quand on fait défiler avec le doigt, une bande vide apparaît sur le côté droit, ou le site semble « dézoomé » avec des marges blanches. Sur ordinateur, tout paraît normal. Aucun message d’erreur ni ligne dans le journal PHP : c’est un problème de CSS (le langage qui gère la mise en page), pas un plantage du serveur.

Google évaluant d’abord la version mobile des pages, ce défaut mérite d’être corrigé vite. Si vous préférez nous confier le diagnostic, notre service de réparation WordPress intervient à distance partout en France, avec un audit gratuit.

Pourquoi mon site Elementor est-il décalé sur mobile ?

Votre site est décalé parce qu’au moins un élément de la page dépasse la largeur de l’écran, ce qui crée une barre de défilement horizontale. Nous classons ci-dessous les causes de la plus fréquente à la plus rare.

• Une animation d’entrée venant de la droite (Fade In Right, Slide In Right, Bounce In Right…). Avant de s’animer, l’élément est placé hors de l’écran, à droite. Indice : le décalage disparaît une fois l’animation jouée.
• Une largeur fixe en pixels : un conteneur, une image ou un widget réglé en Largeur personnalisée de 500 ou 600 px, alors qu’un smartphone affiche environ 360 à 430 px de large. Indice : le décalage est constant.
• Une marge négative ou une position absolue, ajoutée pour faire chevaucher deux blocs ou placer une forme décorative qui « sort » de sa section.
• Du contenu collé qui n’est pas responsive : un tableau, une carte Google Maps ou une vidéo intégrée avec un attribut width= »600″, un mot très long ou une adresse web qui ne se coupe pas.
• Un CSS Elementor obsolète après une mise à jour ou un changement de réglages : les styles mobiles ne s’appliquent plus et la mise en page ordinateur s’affiche en petit.
• Du CSS personnalisé utilisant 100vw (la largeur totale de la fenêtre) ou une balise viewport absente du thème, beaucoup plus rare avec le thème Hello Elementor.

Comment trouver l’élément qui dépasse de l’écran ?

Le moyen le plus rapide est d’exécuter un petit script dans la console du navigateur sur ordinateur, en simulant un écran de smartphone : il encadre en rouge tout ce qui dépasse. Avant de modifier quoi que ce soit ensuite, faites une sauvegarde complète des fichiers et de la base de données, ou au minimum enregistrez la page concernée comme modèle depuis l’éditeur.

1. Confirmer le débordement et la largeur où il apparaît

Ouvrez la page dans Chrome, Edge ou Firefox, puis les outils de développement avec F12 (ou Cmd+Option+I sur Mac). Activez la simulation d’appareil avec Ctrl+Shift+M (Cmd+Shift+M sur Mac) et choisissez un modèle de smartphone, ou une largeur de 375 px. Dans l’onglet Console (la zone qui exécute du JavaScript), tapez cette ligne puis Entrée :

document.documentElement.scrollWidth - document.documentElement.clientWidth

Le résultat est le nombre de pixels qui dépassent. S’il vaut 0, il n’y a pas de débordement à cette largeur : testez une autre taille (Elementor bascule par défaut en version tablette sous 1025 px et en version mobile sous 768 px). Une valeur positive confirme la panne.

2. Repérer le coupable avec un script de diagnostic

Toujours dans la console, collez ce script. Il ne modifie rien sur le site : il entoure en rouge, pour vous seul et jusqu’au rechargement, les éléments qui sortent de l’écran, et les liste avec leur dépassement.

(() => {
  const largeur = document.documentElement.clientWidth;
  document.querySelectorAll('body *').forEach((el) => {
    const r = el.getBoundingClientRect();
    if (r.right > largeur + 1 || r.left < -1) {
      el.style.outline = '2px solid red';
      console.log(Math.round(r.right - largeur) + ' px', el);
    }
  });
})();

Le script signale aussi les enfants de l’élément fautif : intéressez-vous au premier de la liste, le plus haut dans la page. Un clic droit puis « Révéler dans le panneau Éléments » affiche son code. Ses classes vous mettent sur la piste : elementor-invisible ou animated signalent une animation, elementor-widget-image une image, elementor-element-xxxxxxx l’identifiant de l’élément à retrouver dans l’éditeur. Elementor propose aussi une méthode sans console dans sa documentation sur la barre de défilement horizontale : enregistrer la page comme modèle, puis supprimer les conteneurs un par un jusqu’à ce que la barre disparaisse.

Comment corriger le décalage dans Elementor ?

On corrige la cause à la source, dans les réglages de l’élément repéré, plutôt que de masquer le problème pour toute la page. Dans l’éditeur, passez en Mode responsive sur la vue mobile, car beaucoup de réglages sont propres à chaque appareil.

3. Neutraliser une animation d’entrée

Sélectionnez l’élément, puis onglet Avancé, section Effets de mouvement, menu Animation d’entrée. Ce réglage peut être différent selon l’appareil : en vue mobile, choisissez Aucun, ou remplacez l’animation par un Fade In ou un Fade In Up qui ne vient pas du côté. Pour garder l’effet, appliquez plutôt l’étape 4 au conteneur parent (documentation Elementor sur les animations d’entrée).

4. Régler le débordement du conteneur parent sur Masqué

C’est la correction recommandée par Elementor. Sélectionnez le conteneur qui contient l’élément fautif, restez dans l’onglet Mise en page, ouvrez Options supplémentaires et réglez Débordement sur Masqué. Attention : tout ce qui dépasse sera coupé, y compris une ombre ou un menu déroulant, vérifiez donc la section ensuite.

5. Remplacer les largeurs fixes et les décalages

Sur l’élément repéré, onglet Avancé, regardez la Largeur (Largeur personnalisée) et les Marges en vue mobile. Remplacez les valeurs en px par des % (par exemple 100 %), supprimez les marges négatives sur mobile, et pour un élément en Position Absolu, réduisez son Décalage horizontal ou masquez-le sur mobile avec Masquer sur Mobile dans la section Responsive.

6. Rendre responsive le contenu collé

Quand le coupable est un tableau, une carte ou une vidéo intégrée dans un widget HTML ou Éditeur de texte, ajoutez ce CSS dans Apparence > Personnaliser > CSS additionnel (ou dans Réglages du site > CSS personnalisé avec Elementor Pro) :

/* Tableaux : défilement à l'intérieur du tableau, pas de la page */
.elementor-widget-text-editor table {
  display: block;
  overflow-x: auto;
}
/* Cartes, vidéos et autres intégrations */
.elementor-widget-html iframe,
.elementor-widget-text-editor iframe {
  max-width: 100%;
}
/* Mots et adresses très longs */
.elementor-widget-text-editor,
.elementor-heading-title {
  overflow-wrap: break-word;
}

7. Vider le CSS d’Elementor et tous les caches

Si les réglages mobiles semblent ignorés, Elementor sert peut-être d’anciens fichiers CSS. Allez dans Elementor > Outils, onglet Général, et cliquez sur « Effacer les fichiers et les données », puis videz le cache de votre extension de cache, du CDN éventuel et de l’hébergeur. Avec un accès SSH, la commande WP-CLI officielle fait la même chose (documentation Elementor CLI) :

wp elementor flush-css

Profitez-en pour vérifier les points de rupture (les largeurs d’écran où la mise en page change) dans Réglages du site > Mise en page > Points de rupture : une valeur mobile modifiée par erreur peut faire afficher la version tablette sur les téléphones. Voir aussi notre fiche modifications Elementor invisibles sur le site.

8. Contrôler la balise viewport et le CSS personnalisé

Si tout le site paraît dézoomé, affichez le code source de la page (Ctrl+U) et cherchez « viewport ». Vous devez trouver une ligne de ce type, sans laquelle le téléphone affiche la page comme un écran d’environ 980 px :

<meta name="viewport" content="width=device-width, initial-scale=1" />

Si elle manque, le thème ou une extension d’optimisation l’a supprimée : testez avec le thème Hello Elementor sur une copie du site. Cherchez enfin « 100vw » dans votre CSS personnalisé : une largeur de 100vw inclut la barre de défilement et crée souvent quelques pixels de débordement, alors que 100 % reste dans la page.

9. En dernier recours, couper le débordement pour toute la page

Si vous ne pouvez pas corriger l’élément tout de suite, ce CSS supprime le défilement horizontal sur l’ensemble du site. La valeur clip est préférable à hidden, car overflow-x: hidden sur la balise body empêche les éléments en position: sticky (collants au défilement) de fonctionner. Elle est reconnue par tous les navigateurs actuels, depuis Safari 16 sur iPhone (référence MDN sur overflow).

html,
body {
  overflow-x: clip;
}

Pour vérifier que c’est réparé, rechargez la page sans cache sur un vrai smartphone, puis relancez la commande de l’étape 1 dans la simulation mobile : elle doit renvoyer 0.

Comment éviter que le décalage revienne ?

Le décalage revient presque toujours lors d’un ajout de contenu : quelques réflexes suffisent.

• Préférez les largeurs en % et les largeurs maximales aux largeurs fixes en px.
• Réservez les animations venant du côté à l’ordinateur, et choisissez Aucun ou un fondu vertical sur mobile.
• Après chaque nouvelle section, passez en Mode responsive dans l’éditeur avant de publier.
• Après une mise à jour d’Elementor ou du thème, faites un contrôle rapide de vos pages principales sur téléphone, idéalement sur un site de préproduction.

Si votre en-tête disparaît ou se décale aussi sur mobile, notre guide sur le header Elementor qui ne s’affiche pas couvre ce cas. Et si vos réglages refusent de s’enregistrer, consultez Elementor n’enregistre plus vos modifications.

Quand faut-il faire appel à un professionnel ?

Faites appel à un professionnel quand le script ne désigne aucun élément alors que la page déborde, quand le coupable se trouve dans un modèle du Theme Builder, une extension ou le thème que vous ne savez pas modifier, ou quand la correction casse la version ordinateur. D’après notre tarification, une mise en page cassée après une mise à jour du thème ou du constructeur demande en général 1 à 2 heures, soit 70 à 140 € TTC au tarif normal. D’autres guides pas à pas sont réunis sur notre page Résoudre une panne.