# \[ПЛАТНО\] Сделать баннеры для дома адаптивными
**URL:** https://meta.discourse.org/t/paid-make-house-ads-responsive/127537
**Category:** Marketplace
**Created:** [04.Сентябрь.2019 02:22:31 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537 "2019-09-04T02:22:31Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@unschooling](https://meta.discourse.org/u/unschooling)
#### Post date: [04.Сентябрь.2019 02:22:31 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/1 "2019-09-04T02:22:31Z")
Что вы хотите сделать?
Мне нужно добавить адаптивный CSS для баннеров House Ads в новый компонент темы, чтобы они корректно отображались на всех устройствах:
> [@House Ad Templates](https://meta.discourse.org/t/house-ad-templates/122004):
>
> House Ad Templates This guide provides templates for creating house ads using the [Official Discourse Ad Plugin](https://meta.discourse.org/t/advertising-plugin-for-discourse-serve-ads-on-your-discourse-forum/33734). warning Important: Disable ad blockers (including those built in to browsers, e.g. Brave) before working with these ad customizations. Before You Start Create a “House Ads” [theme component](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) to store: CSS for your house ads [Uploaded images](https://meta.discourse.org/t/include-images-and-fonts-in-themes-and-components/62459) used in ads Add the component to all active themes where ads will appear Optimize images using [TinyPNG](https://tinypng.com) to reduce file size while maintain…
В настоящее время на мобильных устройствах баннеры House Ads отображаются так же, как и на десктопе, что создаёт плохой пользовательский опыт.
Также мне понадобится помощь в добавлении адаптивного HTML для правильного отображения баннеров House Ads.
Какой у вас бюджет в долларах США на эту задачу?
Не знаете?
---
### Author:  [@Juan\_Adamuz](https://meta.discourse.org/u/Juan_Adamuz)
#### Post date: [04.Сентябрь.2019 07:04:43 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/3 "2019-09-04T07:04:43Z")
Если вы читали пост о внутренней рекламе, там описан способ установки отдельного изображения для рабочего стола и для мобильных устройств.
```
![]()
![]()
```
Просто задайте изображения для каждого случая (меньшая ширина для телефонов, большая — для настольных версий), и всё!
Лично я использую следующие размеры:
- Мобильная версия: 1282x311
- Десктопная версия: 755x90
Затем создайте компонент и добавьте следующий CSS:
```
$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;
.banner-ad {
display: flex;
clear: both;
max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
background-color: #FEF25E;
border: 1px solid $primary;
box-sizing: border-box;
img {
height: 90px;
&.desktop {
display: block;
}
&.mobile {
display: none;
width: 100%;
}
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
p {
margin: 0;
&.small {
font-weight: bold;
text-align: right;
padding: 1px 5px;
background-color: #000000;
color: #FFFFFF;
}
&.big {
font-size: 24px;
line-height: normal;
padding-bottom: 5px;
color: #434343;
font-weight: lighter;
}
}
.cta {
color: $cta-text-color;
background-color: $cta-background-color;
&:hover {
background-color: darken($cta-background-color, 20%);
}
}
}
}
@media only screen and (max-width: 672px) {
.banner-ad {
img.desktop, p {
display: none;
}
img.mobile {
display: block;
}
.container {
justify-content: center;
.cta {
margin: 0 5px;
font-size: 12px;
}
}
}
}
```
Странные размеры, но всё работает! Вы можете увидеть это в действии [здесь](https://foro.progamingstudio.com).
Оплачивать это не стоит… Возможно, лучше сделать пожертвование в пользу Discourse!
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [04.Сентябрь.2019 17:55:29 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/4 "2019-09-04T17:55:29Z")
> [@Juan\_Adamuz](#):
>
> Это не стоит того, чтобы платить за это.
В зависимости от ситуации, это может стоить того. Легко забыть, что то, что кажется очевидным человеку с опытом веб-разработки, может показаться довольно сложным для того, у кого такого опыта нет.
---
### Author:  [@Juan\_Adamuz](https://meta.discourse.org/u/Juan_Adamuz)
#### Post date: [04.Сентябрь.2019 18:13:06 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/5 "2019-09-04T18:13:06Z")
Я знаю, но это сообщество такое замечательное, и большинство людей помогут с такими вещами 😛
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [04.Сентябрь.2019 18:18:16 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/6 "2019-09-04T18:18:16Z")
> [@Juan\_Adamuz](#):
>
> Знаю, но это сообщество такое замечательное, и большинство людей помогут с такими вещами
Действительно! И для ориентира: я, вероятно, взял бы 200–500 долларов за эту работу. Это _может_ оказаться так же просто, как применить только что предоставленный вами код, но в итоге это может занять гораздо больше времени, так как я не знаю, какие неожиданные проблемы могут возникнуть в процессе выполнения задачи.
---
### Author:  [@unschooling](https://meta.discourse.org/u/unschooling)
#### Post date: [18.Сентябрь.2019 07:13:10 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/7 "2019-09-18T07:13:10Z")
@Juan_Adamuz
Спасибо за помощь! Я знал, как добавить HTML в House Ads и CSS в тему, но у меня возникли трудности с тем, чтобы всё работало правильно, поэтому ваше сообщение действительно помогло мне сделать это лучше.
Однако, похоже, есть проблема. Вокруг контура, на мобильных устройствах и на рабочем столе, кажется, что за ним отображается ещё один баннер, а справа от баннерной рекламы есть жёлтое пространство, которого там быть не должно. Тот же баннер, который не отображается на мобильных устройствах, показывается в разделе «Выше потока постов», и у него нет ни этого контура, ни жёлтой части? Есть какая-то идея, что происходит?
Вы можете увидеть рекламу на главной странице Unschooling(.)com — как видите, оба варианта отображаются правильно ниже, что говорит о том, что что-то в CSS вызывает появление контура и жёлтого пространства.
**Вот HTML, который я использовал, вместе с CSS со страницы House Ads:**
```
```
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [18.Октябрь.2019 07:13:14 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/8 "2019-10-18T07:13:14Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.