هل يمكن تكوين الإعلانات بحيث لا تظهر على صفحة الفئات؟

[Clo]

ملحق رائع!

فقط شيء واحد، هل هناك طريقة لإخفاء إعلانات المنازل في صفحة الفئات فقط؟ أو ربما لعرضها فقط في أسفل مربعات الفئات؟

[Clo]

مرحباً

لقد قمت مؤخرًا بتمكين إضافة الإعلانات لموقعي بهدف عرض الإعلانات الداخلية.
لقد أضفت رموز الإعلانات الداخلية وفقًا للاقتراحات الموجودة في موضوع قوالب الإعلانات الداخلية.

ومع ذلك، فإنها تستمر في إحداث فوضى مع باقي تنسيقات CSS الخاصة بالموضوع الخاص بي على الإصدار المتوافق مع الأجهزة المحمولة/المستجيبة.

يبدو أن حاوية مربع الفئة لها عرض يتجاوز حجم الشاشة فجأة.

هذا هو رمز CSS الذي أستخدمه:

.banner-ad {
    display: flex;
    justify-content: center; /* يوسط المحتوى أفقيًا */
    align-items: center; /* يوسط المحتوى رأسيًا داخل الإعلان */
    clear: both;
    width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* عرض صريح للتوسيط */
    max-width: 100%; /* يضمن عدم تجاوز عرض الحاوية */
    box-sizing: border-box;
    margin: 15px auto; /* يوسط الإعلان ويضيف هامش 15 بكسل أعلاه وأسفله */
    text-align: center; /* يوسط العناصر المضمنة، مثل الصورة */

    img {
        display: block;
        margin: 0 auto; /* يوسط الصورة داخل الإعلان */
        max-width: 100%; /* يضمن تغيير حجم الصورة لتناسب عرض الإعلان */
        height: auto; /* يحافظ على نسبة العرض إلى الارتفاع */
        max-height: 200px; /* يحدد ارتفاعًا أقصى لتقييد الصورة */
        object-fit: contain; /* يضمن تغيير حجم الصورة بشكل متناسب */
        border-radius: 10px; /* يقرب الزوايا بمقدار 10 بكسل */

        &.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; /* يوسط صورة الهاتف المحمول */
            max-width: 80%; /* يضمن تغيير حجم صورة الهاتف المحمول لتناسب عرض الحاوية */
            height: auto; /* يحافظ على نسبة العرض إلى الارتفاع */
            border-radius: 10px; /* يقرب الزوايا لصورة الهاتف المحمول أيضًا */
        }
    }
}

أي اقتراحات حول كيفية إصلاح هذا؟