Hallo,
Ich habe kürzlich das Ad Plugin für meine Website aktiviert, um Hausanzeigen anzuzeigen.
Ich habe die Codes für Hausanzeigen gemäß den Vorschlägen im Thema House Ad Templates hinzugefügt.
Es scheint jedoch, dass dies die CSS-Formatierung meines Themes auf der mobilen/responsiven Version beeinträchtigt.
Es sieht so aus, als ob der Container der Kategoriebox plötzlich eine Breite hat, die über die Bildschirmgröße hinausgeht.
Dies ist der CSS-Code, den ich verwende:
.banner-ad {
display: flex;
justify-content: center; /* Zentriert den Inhalt horizontal */
align-items: center; /* Zentriert den Inhalt vertikal innerhalb der Anzeige */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Explizite Breite für die Zentrierung */
max-width: 100%; /* Stellt sicher, dass die Anzeige nicht die Containerbreite überschreitet */
box-sizing: border-box;
margin: 15px auto; /* Zentriert die Anzeige und fügt 15px Abstand oben und unten hinzu */
text-align: center; /* Zentriert Inline-Elemente wie das Bild */
img {
display: block;
margin: 0 auto; /* Zentriert das Bild innerhalb der Anzeige */
max-width: 100%; /* Stellt sicher, dass das Bild skaliert, um die Anzeigebreite auszufüllen */
height: auto; /* Behält das Seitenverhältnis bei */
max-height: 200px; /* Legt eine maximale Höhe fest, um das Bild zu begrenzen */
object-fit: contain; /* Stellt sicher, dass das Bild proportional skaliert wird */
border-radius: 10px; /* Rundet die Ecken um 10px ab */
&.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; /* Zentriert das mobile Bild */
max-width: 80%; /* Stellt sicher, dass das mobile Bild auf die Containerbreite skaliert */
height: auto; /* Behält das Seitenverhältnis bei */
border-radius: 10px; /* Rundet auch die Ecken für das mobile Bild ab */
}
}
}
Jeder Vorschlag zur Behebung dieses Problems wäre sehr willkommen!