Vérifier que la page entière déborde réellement
Sur téléphone, la page se déplace latéralement, une marge vide apparaît ou une partie du contenu dépasse à droite. Un bloc peut imposer une largeur supérieure à celle disponible : image, rangée, tableau, texte sans coupure ou intégration externe. Le résultat recherché est un contenu lisible dans la largeur de la page, sans couper des éléments utiles.
Distinguez le débordement du document d’un défilement local volontaire. Un grand tableau peut avoir sa propre zone défilante ; déplacer ce tableau ne devrait pas obliger à déplacer aussi le titre et tous les paragraphes. De même, un panneau de navigation prévu pour entrer depuis le côté ne doit pas être traité comme un bloc de contenu à supprimer.
Commencez après un rechargement, dans l’état normal de la page. Un agrandissement par pincement peut permettre un déplacement latéral lié au zoom ; il ne constitue pas à lui seul une preuve de mauvaise mise en page. Vérifiez aussi si le défaut apparaît seulement après l’ouverture d’un menu ou d’une fenêtre.
Notez l’adresse, le téléphone, l’orientation et l’étape où le problème commence. Conservez une capture et les réglages du bloc suspect. Les premières observations se font dans le navigateur ; les changements enregistrés se préparent sur une copie si la structure ou les styles sont partagés.
Reproduire le défaut à une largeur précise
Sur ordinateur, ouvrez la page publique et réduisez progressivement la largeur. Le mode appareil des outils de développement permet aussi de choisir une largeur de fenêtre pour observer le passage. Il fournit une simulation utile, mais ne remplace pas le téléphone sur lequel le défaut se produit.
Gardez le même état de session et de contenu pour comparer. Un utilisateur connecté peut voir une barre d’administration, un bouton ou un message absent chez les visiteurs. Un bandeau chargé tardivement peut également introduire le débordement après quelques secondes. Notez si le défaut existe dès l’arrivée de la page ou après une interaction.
Comparez une page correcte du même site et une page défaillante. Si toutes les destinations débordent, cherchez d’abord une partie commune comme l’en-tête ou le pied. Si une seule page est touchée, un bloc de son contenu ou un modèle particulier devient une piste plus précise.
- Relevez une largeur où la page tient et une largeur où elle déborde.
- Comparez portrait et paysage sur le téléphone.
- Attendez la fin du chargement puis testez les interactions habituelles.
- Fermez les panneaux qui doivent être fermés au départ.
- Gardez ces conditions pour vérifier chaque correction séparément et reconnaître une régression sur une autre largeur.
Retrouver le bloc suspect avec les outils visuels
Faites un clic droit près de la zone qui dépasse puis choisissez Inspecter dans le navigateur. En parcourant les éléments de la page, observez leur cadre et leurs dimensions. Cherchez le premier conteneur dont la largeur ne suit plus celle de son parent, plutôt que modifier tous les blocs à l’extérieur de l’écran.
Dans Styles et Calculé, examinez width, min-width, les marges, les espacements internes et les transformations. Une largeur minimale trop grande peut empêcher un bloc de rétrécir même si sa largeur affichée semble relative. Une marge négative ou une transformation peut aussi décaler un élément sans que son contenu soit particulièrement large.
Décochez temporairement une déclaration suspecte pour vérifier son effet. Le rechargement annule l’essai et laisse le site enregistré intact. Si le débordement disparaît, notez la règle, son fichier et le bloc concerné. L’élément le plus large peut être seulement un descendant du véritable conteneur responsable ; remontez la structure pour comprendre la contrainte.
Dans WordPress, ouvrez ensuite la page ou le modèle et utilisez la Vue en liste pour sélectionner ce bloc. Relevez ses réglages avant de les modifier. Cette voie sans terminal suffit souvent à identifier une image fixée trop large, des colonnes non empilées ou des espacements excessifs. La mesure facultative suivante aide lorsque le responsable reste difficile à repérer.
Mesure facultative en lecture seule dans la console
Si l’inspection visuelle ne suffit pas, ouvrez la Console des outils du navigateur sur la page publique, à la largeur défaillante. Revenez au début du déplacement horizontal avant la mesure. Le fragment ci-dessous lit les dimensions et renvoie des pistes ; il ne modifie ni les styles, ni le contenu, ni les fichiers du site.
largeurVisible correspond à la largeur intérieure de la fenêtre mesurée sur la racine du document. largeurDocument mesure la largeur du contenu, y compris un débordement. Un écart mérite examen, mais doit être rapproché du comportement visible. Les rectangles des éléments sont exprimés par rapport à la fenêtre.
La liste pistes contient des éléments dont le cadre dépasse ses bords avec une petite tolérance. Elle peut inclure un menu latéral volontairement hors cadre ou le contenu d’une zone défilante locale. Ces résultats ne prouvent donc pas qu’il faut supprimer ou redimensionner chacun d’eux. Les pseudo-éléments ne sont pas listés séparément ; ils peuvent aussi participer à une largeur excessive.
Dépliez les résultats pour retrouver les éléments dans l’inspecteur, puis confirmez la cause par un essai temporaire de la règle concernée. Relancez la mesure après chaque correction et au même état de page. Si le site utilise une direction de texte ou des panneaux particuliers, interprétez leurs positions dans ce contexte. La voie visuelle précédente reste disponible si vous préférez éviter la console.
(() => {
const racine = document.documentElement;
const largeur = racine.clientWidth;
return {
largeurVisible: largeur,
largeurDocument: racine.scrollWidth,
pistes: Array.from(document.querySelectorAll('body *')).filter((element) => {
const cadre = element.getBoundingClientRect();
return cadre.width > 0 && (cadre.right > largeur + 1 || cadre.left < -1);
})
};
})()Corriger les dimensions d’une image dans l’éditeur
Si une image est responsable, ouvrez la page, le modèle ou la partie qui la contient, puis sélectionnez le bloc Image. Dans sa barre latérale, relevez la largeur, la hauteur et le rapport éventuel. Une largeur fixe adaptée à un grand écran peut dépasser la place disponible sur téléphone.
Remettez la largeur et la hauteur en automatique lorsque cette présentation convient, ou choisissez une largeur relative adaptée au conteneur si le contrôle le permet. La hauteur doit conserver le rapport de l’image. Vérifiez aussi l’alignement : une pleine largeur dépend de la disposition et de sa prise en charge par le thème ; elle n’est pas nécessaire pour une petite image dans un texte.
Conservez la source de l’image pendant cet essai. Choisir un fichier moins défini ne corrige pas la contrainte d’affichage et peut simplement rendre l’image floue. Si la valeur native est correcte mais que le site force encore une largeur, identifiez la règle CSS qui prend le dessus avant d’ajouter une nouvelle restriction.
- Relevez les valeurs et l’alignement initiaux.
- Corrigez une seule dimension ou son mode de calcul.
- Enregistrez puis vérifiez la page publique à plusieurs largeurs.
- Contrôlez que l’image reste entière et proportionnée.
- Si l’essai ne convient pas, remettez les valeurs initiales et poursuivez l’examen du conteneur.
Empiler les colonnes et corriger les espacements du groupe
Si des colonnes restent côte à côte sur un petit écran, sélectionnez le bloc Colonnes parent dans la Vue en liste. Dans ses Réglages, vérifiez Empiler sur mobile, ou Stack on mobile selon la traduction. Activez ce comportement lorsqu’il correspond au besoin de lecture, enregistrez puis testez la page publique.
Ne confondez pas le réglage du parent Colonnes avec les valeurs d’une colonne individuelle. Une largeur imposée dans un enfant ou dans un CSS personnalisé peut continuer à dépasser après l’empilement. Reprenez alors l’inspection de l’élément qui conserve cette contrainte.
Pour un groupe ou une rangée, examinez les espacements internes, les marges et l’écart entre blocs dans ses réglages de dimensions. Relevez les valeurs puis réduisez l’espacement excessif confirmé. Les contrôles disponibles varient selon le bloc ; un réglage de marge n’est pas un réglage de largeur minimale. N’effacez pas tous les espacements du site pour corriger une seule rangée.
Le résultat attendu est une disposition lisible à petite largeur, sans bouton ou contenu repoussé hors de la page. Vérifiez aussi les largeurs intermédiaires et l’ordinateur. Pour revenir en arrière, remettez les valeurs et l’état d’empilement conservés. Si le conteneur est flexible mais qu’un enfant refuse toujours de rétrécir, le cas CSS ciblé suivant peut être pertinent après confirmation.
Autoriser un enfant flexible à rétrécir quand la cause est confirmée
Cette correction convient si l’inspecteur montre qu’un élément enfant d’une disposition flexible conserve une largeur minimale liée à son contenu. Elle ne concerne pas toutes les colonnes par principe. Vérifiez d’abord le conteneur et essayez temporairement min-width: 0 sur le bon enfant dans les styles du navigateur.
Si cet essai résout le débordement sans couper le contenu, sélectionnez ce bloc enfant dans l’éditeur. Dans Avancé → Classe(s) CSS additionnelle(s), ajoutez contenu-reductible, sans point et sans effacer les classes existantes. Le code ci-dessous cible seulement ce bloc marqué ; le placer sur le parent flexible ne vise pas nécessairement la contrainte de son enfant.
Ajoutez la règle dans le CSS additionnel du site : Apparence → Personnaliser → CSS additionnel pour un thème classique, ou Apparence → Éditeur → Styles → menu à trois points → CSS additionnel pour un thème de blocs. Si ce champ n’est pas accessible avec vos droits ou votre environnement, conservez la correction native possible ou faites appliquer cette seule règle par le responsable des styles.
Le résultat attendu est un enfant qui tient dans la place disponible, avec un contenu toujours lisible. Un mot très long peut encore déborder à l’intérieur : traitez alors sa coupure selon la section suivante. Vérifiez que la règle gagne dans les styles calculés ; ne forcez pas toutes les colonnes avec !important. Pour annuler, retirez la règle et la classe ajoutées.
.contenu-reductible {
min-width: 0;
}Permettre la coupure d’une adresse ou d’une chaîne trop longue
Une adresse visible, un identifiant ou un mot sans espace peut dépasser alors que le paragraphe tient dans la page. Si une règle white-space impose de ne pas revenir à la ligne, corrigez d’abord cette règle d’origine. Une largeur minimale trop grande sur le conteneur relève d’un autre réglage.
Pour un lien, vous pouvez souvent remplacer l’adresse affichée par un libellé clair dans l’éditeur, tout en conservant sa destination. Vérifiez ensuite le lien sur le site public. Si le texte complet doit rester visible, une règle de coupure ciblée peut répondre au besoin sans modifier ses caractères ni l’adresse vers laquelle il mène.
Sélectionnez le bloc de texte concerné et ajoutez texte-repliable dans ses classes CSS additionnelles. Placez la règle ci-dessous dans le même CSS additionnel du site que l’exemple précédent. overflow-wrap: anywhere permet de couper une chaîne autrement insécable lorsque l’espace manque ; elle ne rajoute pas de caractère de césure dans le contenu.
Le résultat attendu est un texte qui se répartit sur plusieurs lignes dans son conteneur. Vérifiez les liens, la lisibilité et la copie du texte. N’appliquez pas cette règle à tout le site sans besoin, notamment aux contenus dont l’alignement ou la structure doit rester spécifique. Pour revenir en arrière, retirez la règle et la classe, ou rétablissez le libellé visible initial si vous l’avez modifié.
.texte-repliable {
overflow-wrap: anywhere;
}Préserver les tableaux et les intégrations qui ont besoin d’espace
Un tableau de données peut nécessiter une largeur que des paragraphes ordinaires n’exigent pas. L’objectif est alors de limiter son déplacement à sa propre zone, tandis que le titre et le texte autour restent dans la page. Couper des colonnes ou réduire les caractères jusqu’à les rendre illisibles ne conserve pas l’information.
Dans un bloc Tableau, examinez le réglage de largeur fixe des cellules. Il distribue les colonnes de façon égale plutôt que selon leur contenu ; il ne constitue pas à lui seul un bouton de réparation mobile. Conservez son état et comparez la lisibilité. Retirez une largeur CSS excessive si elle a été confirmée, puis vérifiez le comportement du conteneur du tableau.
Si une zone défilante locale est nécessaire, elle doit rester identifiable et utilisable au toucher comme au clavier. Vérifiez l’accès aux dernières colonnes et à toutes les commandes. Une simple disparition de la barre de défilement de la page ne prouve pas que les données restent atteignables. Un conteneur personnalisé peut demander une adaptation complète de sa navigation et de ses dimensions.
Pour une iframe fixe dont la source est prise en charge nativement, copiez le code initial dans un fichier de travail. Sur la copie, ajoutez un bloc Intégration avec le bouton +, collez l’adresse publique de la ressource puis cliquez sur Intégrer. Vérifiez son aperçu à petite largeur et ses commandes. Remplacez l’ancien bloc seulement si cette voie conserve le contenu et le fonctionnement attendus. Si la source est refusée ou si un réglage nécessaire manque, retirez le bloc d’essai et gardez l’original ; utilisez alors le mode adaptable réellement documenté par le fournisseur. Ne déformez pas toute la page pour faire entrer une iframe.
Éviter de cacher globalement le défaut
Une règle générale overflow-x: hidden ou overflow-x: clip sur toute la page peut faire disparaître le déplacement latéral sans corriger la largeur fautive. Une partie du texte, un bouton ou un panneau peut alors rester hors de portée. L’absence de barre de défilement ne constitue donc pas une validation.
Si une telle règle a été ajoutée pendant les essais, conservez-la puis désactivez-la sur la copie pour reprendre le diagnostic. Corrigez le bloc responsable avant de décider si une limitation de débordement locale reste justifiée pour un effet précis. Une zone décorative et une navigation interactive n’ont pas les mêmes besoins.
De même, fixer toutes les images, tableaux et blocs à une largeur maximale ne traite pas une marge négative, une transformation ou une contrainte sur leur parent. Cela peut dégrader des éléments qui fonctionnaient déjà. Choisissez la règle ou le contrôle dont le changement a réellement supprimé le débordement.
Le résultat attendu est une page qui tient dans la largeur avec ses contenus accessibles, pas simplement une page qui ne peut plus défiler. Pour annuler un essai, remettez la valeur initiale conservée. Si le masquage était un réglage volontaire d’un composant, vérifiez son ouverture, son animation et sa fermeture avant de le retirer durablement.
Contrôler le contenu complet après la correction
Rechargez la page publique dans les conditions du diagnostic, puis essayez un déplacement latéral. Comparez plusieurs largeurs, les deux orientations du téléphone et une largeur d’ordinateur. Vérifiez aussi après le chargement des images, d’un bandeau ou d’une intégration, car un élément tardif peut réintroduire la largeur excessive.
Si vous avez utilisé la mesure de console, comparez les deux largeurs et examinez les pistes restantes dans leur contexte. Un résultat numérique seul ne démontre pas la lisibilité de la page. Les zones défilantes locales prévues doivent encore permettre d’atteindre leur contenu complet et leurs commandes.
Testez le clavier et le focus sur les liens et boutons proches du bloc corrigé. Un élément peut sembler à sa place tout en recevant un contour coupé ou en déplaçant la page lorsqu’il reçoit le focus. Vérifiez les menus, les formulaires et les boutons de fermeture si la modification touchait un conteneur partagé.
Conservez la correction seulement si elle respecte ces usages et n’introduit pas de défaut sur les pages témoins. Sinon, restaurez le réglage ou la règle précédente et reprenez l’identification de la contrainte. Les tests décrits ici contrôlent ce débordement précis ; ils ne remplacent pas une validation complète de toutes les mises en page du site.
Conserver la source du correctif pour les prochaines pages
Notez le bloc responsable, le réglage ou la règle modifiée et les largeurs utilisées pour vérifier le résultat. Gardez la valeur de départ ainsi que les classes ajoutées. Pour une partie de modèle partagée, relevez les pages qui ont été contrôlées après l’intervention.
Les prochains contenus longs peuvent réintroduire le problème : adresse affichée, tableau plus large ou nouvel élément intégré. Un contrôle avec du contenu représentatif vaut mieux qu’un aperçu vide. Conservez quelques pages témoins contenant les blocs réellement utilisés sur le site, puis vérifiez-les après un changement de thème ou de constructeur.
Aucune extension nouvelle n’est nécessaire pour les corrections natives et CSS ciblées de ce guide. Une extension qui masque le déplacement de toute la page ne prouve pas que les contenus restent accessibles. Si un composant tiers produit sa propre largeur, identifiez son réglage ou sa source et transmettez le cas précis à son mainteneur lorsque la correction dépasse vos accès.
Un dossier utile comprend l’adresse, la largeur, le bloc identifié, la règle concernée et l’effet du changement confirmé sur copie. Précisez si le débordement touche le document ou seulement une zone de données. Ces éléments permettent de corriger le composant réel sans réécrire toute la présentation mobile.
Valider la largeur de la page et le défilement du tableau
Sur une copie WordPress, la mesure donnait 637 pixels pour un document affiché dans une fenêtre de 320 pixels. L’inspecteur a désigné l’enfant d’une rangée flexible. Avec la règle de rétrécissement de ce guide, la page est revenue à 320 pixels. Sur une autre page, une adresse longue faisait monter le document à 561 pixels. La règle de coupure l’a ramené à 320 pixels et le lien répondait toujours à Entrée.
Utilisez des largeurs de test adaptées à votre page et à la taille de texte. Une fenêtre étroite aide à révéler le défaut. Vérifiez aussi la lecture après agrandissement et sur un téléphone lorsque ces usages concernent le site.
- Répétez la mesure avant et après à 320 pixels CSS, puis sur un écran large. À 1 280 pixels, les deux pages de la recette tenaient déjà dans la fenêtre et la correction a conservé leur largeur.
- Si un tableau exige plus de place, atteignez sa zone au clavier et vérifiez la dernière colonne. Sur la copie, les flèches ont déplacé le tableau à l’intérieur de sa zone pendant que la page restait à sa position horizontale initiale.
- Retirez temporairement la règle dans l’inspecteur et vérifiez que le défaut revient. Vous pouvez ainsi relier la correction à une contrainte précise. Enregistrez la règle sur le site de test seulement après avoir contrôlé les contenus voisins.
