Этот сайт содержит большие скриншоты и встроенные примеры сложных компоновок блоков, поэтому он оптимизирован для достаточно широких экранов. Хотя бы от 1280 пикселей.

Адаптация к ширине блока/экрана

  • Настройки оформления блока можно переопределять в зависимости от ширины экрана браузера или блока. Например, вы хотите, чтобы:
  • при ширине больше 1100 пикселей блок был оформлен рамкой с внешним и внутренним отступом 50 пикселей
  • при ширине 600-1110 пикселей блок не имел рамки и внешнего отступа, но выводился с фоновым цветом
  • при ширине меньше 600 пикселей блок вообще не выводился

Для начала добавим все настройки для самой большой ширины экрана (подробнее о настройках читайте в главах про компоновку и оформление). Для этого нам понадобится вкладка “Оформление” окна настроек блока.

Теперь добавим первую точку перехода. Для этого надо нажать на звездочку в левой верхней части окна настроек и ввести значение. Вторую точку перехода можно добавить, наведя мышку на область справа или слева от имеющегося значения.
Обязательно убедитесь, что вы выбрали нужный способ применения точек перехода: к ширине блока или к ширине экрана.
Значения настроек оформления наследуются от верхнего значения ширины на нижний, если для меньшей ширины настройку не переопределить. То есть, чтобы в диапазоне 600-1100 убрать рамку, надо нажать на пересечение строки “Рамка” и столбца 600-1100 и изменить значение настройки.
Сделаем теперь то же самое с остальными настройками, которые изменятся при уменьшении ширины блока в точке 1100:

А для диапазона 0-600 блок вообще не будем показывать:

Вот что у нас получилось. Чтобы посмотреть на трансформацию блока, уменьшите границы экрана.