Question

Добрый день. Купил себе новый адаптивный дизайн на сайт. Теперь не могу установить  скрипты под продажу баннеров, они ломают адаптацию планшетного и мобильного дизайна. Пока стоит просто заглушка она адаптируется под размер экрана и отображается идеально, но как только покупают баннер, он сразу расширяется и ломает дизайн.

https://priscree.ru/img/988283d8308a00.jpg

 

Как с этим быть? Можно ли что-то сделать? Чтоб баннеры отображались нормально на всех расширениях экрана?

 

Сайт: http://seobiznes.net

 

Answer 1

Примерно так:

<div style="display:inline-block;">
<a href="ссылка на сайт партнеров"><img src="ссылка на баннер" alt="описание к изображению"></a>
<a href="ссылка на сайт партнеров"><img src="ссылка на баннер" alt="описание к изображению"></a>
</div>

Comments

К сожелению так не получиться. Там идёт скрипт.  <div id="linkslot_282044"><script src="https://linkslot.ru/bancode.php?id=282044" async></script></div>. Я поставил на сайте, зайдите ещё раз на сайт.

---

Андрей Бот,

Тогда не получится. К сриптам это не применить. Пробуйте таблицами, например так https://www.ucoz.ru/qa/index.php/94679

---

Yuri_Geruk,

У меня и сейчас стоит эта таблица. Пока заглушки пустые всё нормально. Как только покупают баннер он сразу разширяетбся и ломает дизайн.  Вот например на этом сайте https://tor-corporation.com/ тоже адаптивный дизайн и скрипт отображается нормально, дизайн не ломает.  https://priscree.ru/img/b497060a1b210b.jpg

---

Андрей Бот,

Для изображений нужно прописать стили в CSS:

img {max-width:100%!important;}

---

Yuri_Geruk,

Хорошо. Как мне это сделать для стороннего скрипта?     На этом сайте я вижу такой исходный код  id="linkslot_270850" class="my-4"><script src="https://linkslot.ru/bancode.php?id=270850" async></script></div>  </div>                      <div class="main-block__right">                          <div class="main-banner__image-xs d-block d-xl-none">                              <img src="/theme/premium15/assets/common/images/main-shape.png" alt="Tor Corporation">                          </div>                          <div class="main-banner__image d-none d-xl-block">                              <img class="main-banner__cell" src="/theme/premium15/assets/common/images/icons/main__cell.svg" alt="Tor Corporation">                                 <img class="main-banner__phone" width="370" height="230" src="/theme/premium15/assets/common/images/icons/main__phone.svg" alt="Tor Corporation">                                 <img class="main-banner__pill_first" width="100" height="67" src="/theme/premium15/assets/common/images/icons/main__pill.svg" alt="Tor Corporation">                              <img class="main-banner__pill_second" width="100" height="67" src="/theme/premium15/assets/common/images/icons/main__pill.svg" alt="Tor Corporation">                              <img class="main-banner__pill_third" width="100" height="67" src="/theme/premium15/assets/common/images/icons/main__pill.svg" alt="Tor Corporation">                              <img class="main-banner__pill_fourth" width="45" src="/theme/premium15/assets/common/images/icons/main__pill.svg" alt="Tor Corporation">                                 <img class="main-banner__pillar_first" width="120" src="/theme/premium15/assets/common/images/icons/main__pillar.svg" alt="Tor Corporation">                              <img class="main-banner__pillar_second" width="120" src="/theme/premium15/assets/common/images/icons/main__pillar.svg" alt="Tor Corporation">                              <img class="main-banner__pillar_third" width="120" src="/theme/premium15/assets/common/images/icons/main__pillar.svg" alt="Tor Corporation">                              <div class="main-banner__dots">                                  <span></span>                                  <span></span>                                  <span></span>                              </div>                              <img class="main-banner__flash-first" src="/theme/premium15/assets/common/images/icons/flash.svg" width="20" height="20" alt="Tor Corporation">                              <img class="main-banner__flash-second" src="/theme/premium15/assets/common/images/icons/flash.svg" width="20" height="20" alt="Tor Corporation">                              <img class="main-banner__flash-third" src="/theme/premium15/assets/common/images/icons/flash.svg" width="20" height="20" alt="Tor Corporation">                          </div>                          <ul class="soc-links soc-links_horizontal d-none d-lg-block">

---

Андрей Бот,

Убрать фиксированную ширину в px и сделать в процентах. То есть вместо 120 прописать подобно 10%

---

Yuri_Geruk,

Спасибо, но я не понимаю ваших загадок. И даже представления не имею что и где прописывать и менять. Если бы мне дали готовый код и сказали это поставить туда, а это туда, я бы ещё поставил, а так что-то менять в кодах я не профи, и в кодах вообще ничего не понимаю, для меня это просто набор иероглифов!

---

Андрей Бот,

Найти width="120" или width="20" где циферные значение заменить на значения в процентах. Готового адаптивного кода для вас нет, настраивайте все в процентах.

---

Yuri_Geruk,

Где мне его найти? Я выше привёл пример кода с сайта https://tor-corporation.com/,  https://priscree.ru/img/22fbc77aae5b09.jpg  у меня такого кода нет!  Вы думаете если я его скопирую и поставлю себе то у меня всё будет работать?

---

Андрей Бот,

Если вы не имеете доступ к редактированию кода баннера, тогда адаптивным его сделать не получится. Максимально что вы можете в данной ситуации, это просто прописать в стили строку:

img {max-width:100%!important;}

---

Yuri_Geruk,

Прописываю, ничего не меняется!!!!

---

Андрей Бот,

Часто это решает проблему адаптивности фото на сайте, если вам не помогает, ну тогда решения для вас нет.

---

Yuri_Geruk,

Да я так уже и понял, но мне не нужно адаптировать фото. Решение есть. Я уже пересмотрел десятки сайтов на адаптивных дизайнах, один из них я вам привёл в пример, и у всех у них решение нашлось, а для меня его нету? Смешно.

---

Андрей Бот,

1. Если баннеры грузятся с стороннего сайта и вмешаться в их код нельзя, это сложно настроить для адаптивности. То что есть на сторонних сайтах, вы не знаете как у них все реализовано, у многих дополнительные плагины подключаются.
2. Я вам дал пример решения через таблицы, делается две ячейки как в примере https://www.ucoz.ru/qa/index.php/94679 ширина у таблицы 100% таблица адаптивна, но если в нее добавлять баннеры которые не адаптивны, тогда решение увы 50 / 50.

 

---

Yuri_Geruk,

Я понимаю. На старом, обычном дизайне эта таблица работала идеально. В адаптивном дизайне, она уже не катит.

---

Yuri_Geruk,

Вот, мой старый дизайн, тут всё работало отлично.  https://priscree.ru/img/8ba9fa4be21204.jpg

---

Yuri_Geruk,

Дело вовсе не в таблице. Вы наверное просто меня не поймёте. Даже если я просто поставлю один баннер в шапку, он не будет адаптироваться под дизайн, хоты другие баннеры, размещённые на страницах сайта отлично подстраиваться под дизайн, например эти:  https://seobiznes.net/index/zarabotok_na_klikakh/0-7  https://priscree.ru/img/c11210d9670b27.jpg

---

Андрей Бот,

Один баннер отлично адптируется, пример http://joxi.ru/xAegGnkcgKeaJm Баннеры в шапке лучше завернуть в код:

<div align="center">здесь код баннеров</div>

---

Yuri_Geruk,

Вот я ставлю заглушку в шапку сайта, она идеально адаптируется под дизайн.  https://priscree.ru/img/ef13a68c855fe0.jpg

---

Yuri_Geruk,

Затем я покупаю баннер и она удлиняется вправо и ломает дизайн  https://priscree.ru/img/512b69c56f08e0.jpg

---

Yuri_Geruk,

Согласе <div align="center">здесь код баннеров</div>, но этот код работает до тех пор, пока кто-то не купит баннер. После покупки баннера он сразу смещается влево или вправо!

---

Yuri_Geruk,

Вот если я правильно понимаю, на сайте https://tor-corporation.com/ задали этому баннеру класс в html, а затем в CSS прописали [id^="linkslot"] img, [id^="linkslot"] * {      max-width: 100% !important;      height: auto !important; и банер прикрасно адоптировался под дизайн. Но я не знаю как это правильно сделать!

---

Андрей Бот,

Добавьте повторно в блок несколько баннеров 2-3 и посмотрим возможные варианты решения. Добавите, сообщите здесь.

---

Yuri_Geruk,

Всё, добавил.

---

Андрей Бот,

Заверните текущие баннеры в такой код:

<div class="banner" align="center">здесь код баннеров</div>

в стили прописать:

.banner [id^=linkslot_],.banner [id^=linkslot_] div {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    display: contents;
}

---

Yuri_Geruk,

Ура, сработало. Спасибо вам огромное!!!!!