كيفية إضافة HTML مخصص بعد "post_1" (الجزء 2)

مرحبًا،

يتعين عليك استخدام بعض CSS للقيام بذلك. :slightly_smiling_face:

في العرض المشترك (CSS) للجوال وسطح المكتب، أضف عرضًا بنسبة 100% للصورة.

#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

في عرض سطح المكتب (CSS)، أضف عرضًا أقصى لـ #custom-ad لضبط عرض اللافتة ليكون مساويًا لعرض صورة الملف الشخصي للموضوع + جسم الموضوع. وهذا سيكون عرض الصورة بنسبة 100%، وهو ما أضفناه أعلاه إلى العرض المشترك.

#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

45px = عرض صورة الملف الشخصي للموضوع
690px + (11px * 2) = عرض جسم الموضوع والحشوة اليسرى 11px واليمنى 11px المستخدمة في فئة .cooked.

سيبدو الأمر كما يلي :arrow_down:

عرض سطح المكتب (كامل)


عرض سطح المكتب (متجاوب)


عرض الجوال