• Post category:webdesign
  • Temps de lecture :2 min de lecture
You are currently viewing Responsive et l’espace sur la droite

On construit un site web de A à Z, on contrôle que tous les contenus soient bien présents, les mentions obligatoires et les informations sur la politique de confidentialité publiées. Un check rapide des noms des photographies pour qu’ils soient cohérents avec l’image affichée, ainsi que les textes alternatifs. On regarde bien que la charte graphique soit respectée avec les bonnes couleurs et la typographie, que la hiérarchie des balises Hn soit conforme sur toutes les pages et puis, c’est parti, on teste attentivement le nouveau site sur plusieurs devices.

Quand on se rend compte qu’en mode tablette le site affiche un espace étrange sur la droite 😱.
Je regarde rapidement le code avec l’inspecteur de Chrome et de Firefox, et je ne vois rien d’anormal, je regarde ma feuille de style, mais je ne vois toujours pas où est le problème. Peut-être éventuellement une largeur de 100% à niveau du menu de navigation qui, une fois enlevée, résout le problème de l’espace à droite, mais on voit d’autres soucis qui apparaissent…😰

Je cherche, alors, dans les moteurs de recherche et je tombe sur une série de solutions qui permettent de cacher la partie de droite d’un site.
En gros, on cache tout ce qui dépasse sur la droite, mais le problème reste. 🙈 🙉 🙊

hide

Et puis LA solution était là juste devant moi ! 🤩

* {
  background: #000 !important;
  color: #ffff00 !important;
  outline: solid #f00 1px !important;
}

Merci à ce blog : https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Avec ce code CSS, on rend visibles les bords de tous les éléments invisibles. J’ai pu ainsi constater qu’il y avait des éléments qui dépassaient sur la droite et j’ai pu corriger le problème proprement !