Ciao,
Recentemente ho abilitato il plugin Ad per il mio sito con l’obiettivo di mostrare annunci interni.
Ho aggiunto i codici degli annunci interni secondo i suggerimenti trovati nell’argomento Modelli di annunci interni.
Tuttavia, continua a creare problemi con il resto del CSS del mio tema nella versione mobile/responsive.
Sembra che il contenitore della casella delle categorie abbia improvvisamente una larghezza che supera le dimensioni dello schermo.
Questo è il codice CSS che sto usando:
.banner-ad {
display: flex;
justify-content: center; /* Centra il contenuto orizzontalmente */
align-items: center; /* Centra il contenuto verticalmente all'interno dell'annuncio */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Larghezza esplicita per il centraggio */
max-width: 100%; /* Assicura che non superi la larghezza del contenitore */
box-sizing: border-box;
margin: 15px auto; /* Centra l'annuncio e aggiunge un margine di 15px sopra e sotto */
text-align: center; /* Centra gli elementi inline, come l'immagine */
img {
display: block;
margin: 0 auto; /* Centra l'immagine all'interno dell'annuncio */
max-width: 100%; /* Assicura che l'immagine si ridimensioni per riempire la larghezza dell'annuncio */
height: auto; /* Mantiene le proporzioni */
max-height: 200px; /* Imposta un'altezza massima per limitare l'immagine */
object-fit: contain; /* Assicura che l'immagine si ridimensioni proporzionalmente */
border-radius: 10px; /* Arrotonda gli angoli di 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; /* Centra l'immagine mobile */
max-width: 80%; /* Assicura che l'immagine mobile si ridimensioni per adattarsi alla larghezza del contenitore */
height: auto; /* Mantiene le proporzioni */
border-radius: 10px; /* Arrotonda gli angoli anche per l'immagine mobile */
}
}
}
Qualsiasi suggerimento per aiutarmi a risolvere questo problema sarebbe molto apprezzato!