Как сделать медийный блок РСЯ на всю ширину, как на портале E1

Многие вебмастера и владельцы сайтов хотят разместить рекламный блок РСЯ (Рекламная сеть Яндекса) на всю ширину страницы, независимо от устройства пользователя. Однако стандартные настройки Яндекса не позволяют растянуть объявление на всю ширину контента - для этого требуется доработка вёрстки. В этой статье мы разберём, как реализовать такой блок на примере портала E1, где медийный блок отображается на всю ширину как на десктопе, так и на мобильных устройствах.

Почему стандартный блок РСЯ не растягивается на всю ширину?

Яндекс.Директ и РСЯ ограничивают ширину рекламного блока рамками контейнера, в который он вставлен. Если контейнер имеет фиксированную ширину (например, 1200px), то блок не выйдет за его пределы. Для отображения на всю ширину экрана необходимо изменить CSS-стили и HTML-структуру страницы.

Пошаговая инструкция по настройке блока на всю ширину

Шаг 1. Создайте контейнер для рекламы

В нужном месте шаблона (например, сразу после header) добавьте HTML-код:

<div id="yandex_rtb_fullwidth"></div>

Шаг 2. Настройте CSS для растяжения на всю ширину

Пропишите стили, которые перекроют ограничения родительских элементов:

#yandex_rtb_fullwidth {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

Этот код заставляет блок занимать 100% ширины окна браузера и центрироваться относительно страницы.

Шаг 3. Вставьте код рекламного блока РСЯ

Получите код объявления в кабинете Яндекс.Директ (формат - медийный блок) и поместите его внутрь контейнера. Убедитесь, что блок не имеет фиксированной ширины в настройках (выберите опцию «Авто» или «На всю ширину»).

Дополнительные рекомендации для мобильных устройств

На смартфонах и планшетах важно, чтобы блок не выходил за границы экрана и не создавал горизонтальную прокрутку. Используйте медиазапросы для корректировки:

@media (max-width: 768px) {
  #yandex_rtb_fullwidth {
    width: 100%;
    left: 0;
    transform: none;
  }
}

Важные нюансы

• Проверьте, что родительские элементы не имеют свойства overflow: hidden, иначе блок может обрезаться.
• Убедитесь, что блок не перекрывает важный контент и не нарушает политику Яндекса по размещению рекламы.
• Тестируйте на разных разрешениях экрана - от 320px до 1920px.

Часто задаваемые вопросы