Salut,
J’ai récemment activé le plugin Ad pour mon site dans le but d’afficher des annonces internes.
J’ai ajouté les codes d’annonces internes selon les suggestions trouvées dans le sujet Modèles d’annonces internes.
Cependant, cela perturbe le reste du CSS de mon thème sur la version mobile/responsive.
Il semble que le conteneur de la boîte de catégorie ait soudainement une largeur qui dépasse la taille de l’écran.
Voici le code CSS que j’utilise :
.banner-ad {
display: flex;
justify-content: center; /* Centre le contenu horizontalement */
align-items: center; /* Centre le contenu verticalement dans la publicité */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Largeur explicite pour le centrage */
max-width: 100%; /* S'assure qu'il ne dépasse pas la largeur du conteneur */
box-sizing: border-box;
margin: 15px auto; /* Centre la publicité et ajoute une marge de 15px en haut et en bas */
text-align: center; /* Centre les éléments en ligne, comme l'image */
img {
display: block;
margin: 0 auto; /* Centre l'image dans la publicité */
max-width: 100%; /* S'assure que l'image s'adapte pour remplir la largeur de la publicité */
height: auto; /* Maintient le rapport d'aspect */
max-height: 200px; /* Définit une hauteur maximale pour contraindre l'image */
object-fit: contain; /* S'assure que l'image s'adapte proportionnellement */
border-radius: 10px; /* Arrondit les coins de 10px */
&.desktop {
display: block;
}
&.mobile {
display: none;
}
}
}
@media only screen and (max-width: 100px) {
.banner-ad {
img.desktop, p {
display: none;
}
img.mobile {
display: block;
margin: 0 auto; /* Centre l'image mobile */
max-width: 80%; /* S'assure que l'image mobile s'adapte à la largeur du conteneur */
height: auto; /* Maintient le rapport d'aspect */
border-radius: 10px; /* Arrondit également les coins de l'image mobile */
}
}
}
Toute suggestion pour m’aider à résoudre ce problème serait grandement appréciée !