مرحباً،
لقد قمت مؤخرًا بتمكين إضافة الإعلانات لموقعي بهدف عرض إعلانات داخلية.
لقد أضفت رموز الإعلانات الداخلية وفقًا للاقتراحات الموجودة في موضوع قوالب الإعلانات الداخلية.
ومع ذلك، فإنها تستمر في إحداث خلل في باقي تنسيقات 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; /* يجعل الزوايا دائرية لصورة الهاتف المحمول أيضًا */
}
}
}
أي اقتراحات للمساعدة في إصلاح هذا ستكون محل تقدير كبير!