# Как добавить пользовательский HTML после «post\_1» (часть 2)

**URL:** <https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619>\
**Category:** Support\
**Created:** [04.Сентябрь.2021 15:30:09 UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619 "2021-09-04T15:30:09Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [05.Сентябрь.2021 11:25:47 UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/2 "2021-09-05T11:25:47Z")

</div>

Здравствуйте,

Для этого нужно использовать CSS. 🙂

В представлении Common (CSS) для мобильных и десктопных устройств добавьте ширину 100% к изображению.

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

```

* * *

В представлении Desktop (CSS) добавьте максимальную ширину для идентификатора `#custom-ad`, чтобы установить ширину баннера равной ширине аватара темы + тела темы. Это будет ширина изображения 100%, которую мы добавили выше для Common.

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

```

45px = ширина аватара темы  
690px + (11px \* 2) = ширина тела темы и отступы слева и справа по 11px, применяемые к классу `.cooked`.

Это будет выглядеть так ⬇

**Представление Desktop (полное)**

 ![Screenshot 2021-09-05 at 13.20.26](https://global.discourse-cdn.com/meta/original/3X/9/c/9c4af603b16bfe3d2598690afbd2415ac595d406.jpeg)

* * *

**Представление Desktop (адаптивное)**

 ![Screenshot 2021-09-05 at 13.20.50](https://global.discourse-cdn.com/meta/original/3X/9/5/952d7c59294d3d001e87e1450f9f0b2207cb1e0a.png)

* * *

**Представление Mobile**

 ![Screenshot 2021-09-05 at 13.21.41](https://global.discourse-cdn.com/meta/original/3X/4/1/417aca3f0c300b0f72db6078ebf21645de940c93.png)

---

_[View the full topic](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619)._