Decalage

alma83

salut chef

depuis quelques temps y a un décalage sur Firefox  pas chez vous?

ludovick

je n'ai pas ce problème sur Chrome.
Essaye de désactiver uBlock ou autre bloqueur de pub.

alma83

OK merci Ludo je regarde ça

Dutchman24

pas la peine, le "decalage" est causé par <div class="espacemedia" height: 300px
Le bloqueur de pub enlevé le contenu de cette <div> mais pas le div lui-meme qui fait 300 pixels d'haut.
La solution est de modifier le class espacemedia dans le css en
.espacemedia {
height: auto;
}
Mais seulement @pioc34 peut le faire.

pioc34

C'est pour réserver l'espace pour la pub sinon le CLS qui fait partie des mesures utilisées par google pour classer les pubs est mauvais.

Dutchman24

@pioc34
Mais en height: auto le <div> s'adapte automatiquement, Non?

pioc34

La pub s’adapte à l’espace et est générée après la page, si je mets auto la hauteur sera de 0 et donc la pub va faire bouger l’affichage ce qui est mauvais.

Dutchman24

@pioc34
C'est le script de google ads qui decide, le height d' .espacemedia est remplacé par
height: auto !important.
Et le pub fait 280px donc le div espacemedia devient aussi de 280px. 

Le height 300px n'est pas pris en compte si pas de bloqueur de pub, et l'height 300px, est seulement appliqué si le pub est bloqué, ce qui fait un gros decalage, avec 300px de vide. Donc je pense que l'height 300px est inutile ! Peut-être tu peux juste faire height: auto; max-height: 300px;

la pub va faire bouger l’affichage ce qui est mauvais.

Je ne comprend pas exactement dans quelle sens la pub fait bouger l'affichage, mais es-ce-que tu as essayé de mettre un clearfix après le <div espacemedia?
Comme p.e. un <br style="clearfloat" /> après <div class="espacemedia">...</div>

et dans le css:

.clearfloat { 

     clear:both;

     height:0;

     font-size: 1px;

     line-height: 0px;

}

pioc34

si je ne mets pas de height, il n'y a pas d'espace. La page se charge normalement et lorsque la pub se charge, le contenu part vers le bas. C'est ce qu'on appelle le CLS qui fait partie des core web vitals. Je suis obligé de réserver l'espace pour pas que la mise en page bouge lors du chargement.

Dutchman24

height: auto;
max-height: 300px;
semble de fonctionner dans devtools (F12 chrome)