[Résolu] Page instable

Bonjour,
sur un site, j'ai un problème avec les mobiles, la page n'est pas fixée sur le viewport, on peut la tirer vers la gauche et un petit espace apparaît à droite de l'écran, elle n'est pas stable, comme si elle dansait. Je n'ai pas ce problème sur un autre site que j'ai réalisé en grid, tout est stable, la page ne peut pas bouger. Et je n'arrive pas à voir où est la différence entre mes deux réalisations.
Edit : Avec un lien, ça ira mieux : https://musiquenvrac.fr
J'ai pourtant réglé le html

html {
 	width:100%;
	margin:auto 0;
	overflow-x: hidden;}

et aussi

 *, *:before, *:after {
	box-sizing : border-box;
	box-sizing: inherit;} 

Bien sûr, la balise meta viewport est présente. Je pense que le problème vient de ce que je dois mettre sur html et body, en début de css. Mais quoi, exactement ?
Mobile SAMSUG Galaxy S6 mais sur safari le problème est aussi là, bien que moindre.
Modifié par Bongota (19 Oct 2021 - 19:32)

Salut,

avoir réglé le problème des dépassements et stabilisé la page, c'est bien, avoir compris où était le problème, je ne trouve toujours pas.

Comme tu le précise, il doit y avoir quelque part une mauvaise configuration.

À moins que le sujet ait été déjà traité sur le forum, je crois que ce serait bien que l'un d'entre vous fasse un petit tuto sur ces problèmes de structure et de dépassements, qui sont assez vicieux dans le sens où ils n'empêchent pas un site de fonctionner.
Bonne journée.

On peut essayer de lister quelques points repères en vrac

* le modèle de boite mal choisi (box-sizing)
* l'oubli d'une feuille de reset pour uniformisé ou remettre à 0 certaines valeurs.
* marges interne ou externes latérales exprimés en % : le cumul marge + contenu peut facilement être supérieur à la largeur de l'écran.
* width:100% ou 100vw . l'un ne voit pas les marges extérieur et l'autre ne voit pas non plus les barres de défilement.
* transform (le contenu occupe l'espace qu'il devrait occuper avant transformation =>scale(0.5) est visuellement trompeur ,à l'opposé, le navigateur cherchera à montrer ce qui éventuellement sort d'un coté de l'écran en fonction du sens de lecture.
* par le passé : les ombrages (cela ne semble plus être le cas, sauf peut-être navigateur exotique (box ou TV android, console de jeux, OS bridé, etc ...) .
* Les display comme ceux du table-layout, mais aussi les inline-X ou le contenu peut élargir le conteneur au delà de la largeur dispo initiale.
* column CSS avec une hauteur fixe, qui s’étalera du coup horizontalement idem pour flex en colonne.
* les enfant grid ou flex dont les contenus peuvent débordés et se superposés avec ou sans flex-shrink pour flex.
* des imbrications sur plusieurs niveau impliquant des flex/grid/block ou le calcul des largeurs devient aléatoire (gap, padding, margin , ... , débordement flex non contrôlé : (sans ajout d'overflow ou min-width pour compenser ), élément de formulaire (form,fieldset) ou autre (ul,ol,li , figure, video,iframe,object, ....) qui peuvent venir rendre hasardeux les calculs de largeurs par le navigateur.
* les valeurs en vX ou % qui s'arrondissent pas comme on le souhaiterais une fois cumulées
* se méfier des max-content et min-content
etc ...

Quelques garde-fous utilisables selon les contextes:
1) Les validateurs HTML et CSS pour débusquer les typos et imbrications hasardeuses.
2) en vrac
flex-wrap
max-width
se méfier de width
overflow

auto-fill/auto-fit
se méfier minmax()
se méfier min()
max()
se méfier de fit-content()
flex-shrink
font-size
word-break/break-word
calc()
clamp()
etc ...

se méfier = plus que les autres, ne pas oublié qu'ils sont là !

sans oublier les mediaqueries pour réorchestrer tout ça

C'est une liste en vrac non exhaustive qui peut-être modifiée, allongée et commentée , et on s'aperçoit vite que c'est plus complexe qu'il n'y parait , Il y a aussi ce qui concerne le contenu qu'il faut laissé vivre et qui est probablement la chose la plus complexe à anticiper.

Faire un tuto la dessus , il va être difficile de lister et catégoriser l'essentiel pour ensuite aller dans les détails et en faire quelque chose de clair et confortable à lire.
Je pense que le premier conseil est de vérifier au fur et à mesure de l'insertion de contenu et de nouvelle règle qu'il n'y a pas de débordement qui apparaissent.

P.S. j'en oubliais d'autres dans la trousse à outils qui sont encore assez récent pour ne pas y penser au premier abord:

all:revert; pour faire un reset en cours de route ou faire fis d'un framework sur une zone particuliere.

les selecteurs :is() et :not() qui permettent facilement d'augmenter la specifité/poids d'un selecteur et :where() qui lui n'a aucune incidence sur la spécifité/poids du selecteurs et qui permet d'ajouter des règles qui ne seront prises en compte seulement si elle ne sont pas indiquer ailleurs. Ces 3 là permettent de redéfinir certaines règles sous conditions sans que leur moment de chargement ai une réelles incidence. (ne tenter plus les !important, ils n'y a plus vraiment d'excuses avec ceux là , sauf cas de style dans l'attribut style.)
Modifié par gcyrillus (21 Oct 2021 - 15:47)

Quel travail !
pour le moment je me sert de ce que tu m'a proposé :

* {
  box-sizing:border-box;}
div {
  max-width:calc(100% - 3px);}

qui a l'air de bien régler le problème. J'ai quand même commencé à corriger certains points et remis le tout en ligne qui fonctionne bien.
Cet échange m'aura été très utile et j'espère que d'autres vont s'en emparer.
Je suis parti sur un gabarit que j'ai rendu responsive (il ne l'était pas) et j'ai effectivement bien charcuté le tout. C'est sûr que j'ai du travail sur la planche.
Merci pour tout.