Kann man Anzeigen so konfigurieren, dass sie nicht auf der Kategorie-Seite angezeigt werden?

Ein tolles Plugin!

Nur eine Sache: Gibt es eine Möglichkeit, Hausanzeigen nur auf der Kategorieseite auszublenden? Oder sie vielleicht nur am unteren Rand der Kastenfelder anzuzeigen?

Hallo :wave:

Ich habe kürzlich das Ad Plugin für meine Website aktiviert, um Hausanzeigen anzuzeigen.
Ich habe die Hausanzeigen-Codes gemäß den Vorschlägen im Thema House Ad Templates hinzugefügt.

Es scheint jedoch, dass es die restliche CSS meines Themas auf der mobilen/responsiven Version durcheinanderbringt.


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 Breite den Container nicht ü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 Breite der Anzeige 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 */
        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 */
        }
    }
}

Haben Sie Vorschläge, wie ich das beheben kann?

2 „Gefällt mir“