Контейнерні запити в Elementor: адаптивність без прив’язки до breakpoint-ів

Що таке container queries і чим вони відрізняються від media queries

Media query перевіряє характеристики viewport: ширину вікна браузера, орієнтацію екрана або роздільну здатність. Наприклад, правило `@media (max-width: 768px)` спрацює на вузькому екрані, незалежно від того, скільки місця фактично отримує конкретна картка.

Container query перевіряє розмір визначеного контейнера. Тому один і той самий компонент може мати компактний вигляд у сайдбарі та розгорнутий вигляд у широкій секції, навіть якщо сторінка відкривається на одному й тому самому моніторі.

Це не означає повну відмову від breakpoint-ів. Media queries залишаються корисними для глобальної сітки, навігації та загальних відступів. Container queries краще підходять для автономних повторюваних компонентів.

• media queries орієнтуються на viewport;
• container queries орієнтуються на ширину батьківського контейнера;
• компонент стає більш незалежним від місця, у якому його розмістили;
• одні й ті самі стилі можна повторно використовувати в різних секціях сторінки.

Підготовка структури в Elementor

Для прикладу створимо батьківський контейнер, у якому розташована картка товару або будь-який інший повторюваний компонент. Батьківський елемент визначатиме доступну ширину, а внутрішня картка реагуватиме на неї.

У Elementor додайте батьківському контейнеру CSS-клас `card-area`. Внутрішньому елементу картки, для якого потрібна адаптивна поведінка, додайте клас `product-card`. Клас потрібно вказувати без крапки: крапка використовується вже в CSS-селекторі.

Якщо на сторінці є кілька незалежних областей із картками, кожна з них може мати власний контейнер `card-area`. Це дає змогу компонентам реагувати на свою ширину, а не на ширину всієї сторінки.

• батьківський контейнер: `card-area`;
• внутрішня картка: `product-card`;
• перевірте, що картка справді є нащадком контейнера, а не сусіднім елементом;
• якщо CSS додається через Elementor, переконайтеся, що у вашій конфігурації доступне поле Custom CSS; за потреби правило можна розмістити у глобальних стилях теми або в іншому підключеному CSS.

Базове налаштування контейнерного запиту

Спочатку потрібно оголосити батьківський елемент контейнером для запитів. Для адаптації за горизонтальною шириною використовується `container-type: inline-size`. Після цього браузер зможе перевіряти ширину `card-area` у правилах `@container`.

Далі задайте базовий вигляд картки та змініть його для вузького контейнера. У прикладі широка картка має дві колонки, а за ширини контейнера до 520 пікселів переходить в одну колонку.

• значення `inline-size` орієнтується на розмір у напрямку рядка, що відповідає горизонтальній ширині у звичайному режимі письма;
• поріг 520 пікселів є прикладом, а не універсальним стандартом;
• порогове значення краще визначати за реальною шириною компонента та довжиною його вмісту.

.card-area {
  container-type: inline-size;
}

.product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
}

@container (max-width: 520px) {
  .product-card {
    grid-template-columns: 1fr;
  }
}

Як зробити запит зрозумілішим у складній структурі

Якщо на сторінці є вкладені контейнери, браузер зазвичай використовує найближчий батьківський елемент, який оголошено контейнером. У простій структурі цього достатньо, але в складному шаблоні краще назвати контейнер явно.

Для цього до батьківського елемента додають `container-name`, а назву вказують у правилі `@container`. Такий варіант полегшує читання CSS і зменшує ризик, що запит випадково почне орієнтуватися на інший вкладений контейнер.

• використовуйте назву, якщо нащадки містять кілька контейнерів;
• назва контейнера має бути однаковою в `container-name` і `@container`;
• не використовуйте надто загальні назви на кшталт `main`, якщо в проєкті багато незалежних компонентів.

.card-area {
  container-type: inline-size;
  container-name: card-area;
}

@container card-area (max-width: 520px) {
  .product-card {
    grid-template-columns: 1fr;
  }
}

Приклади використання в Elementor

Контейнерні запити особливо корисні там, де один компонент може з’являтися в різних частинах сайту. Це стосується карток товарів, записів блогу, тарифних блоків, профілів авторів, віджетів у сайдбарі та елементів Loop Grid.

Наприклад, у широкій секції картка може розміщувати зображення ліворуч, а текст праворуч. У вузькому сайдбарі така структура стає незручною, тому зображення, заголовок і кнопка переходять у вертикальний порядок.

Той самий принцип можна застосувати не лише до колонок. За шириною контейнера можна змінювати відступи, розмір заголовка, напрямок flex-розкладки, кількість колонок у внутрішній сітці або видимість другорядних декоративних елементів.

• картки товарів у Loop Grid;
• блоки зображення та тексту в сайдбарі;
• повторювані віджети в шаблонах Elementor Theme Builder;
• компоненти, які використовуються і в повній ширині, і в колонках;
• внутрішні сітки з різною кількістю колонок залежно від доступного простору.

.card-area {
  container-type: inline-size;
}

.product-card__content {
  display: flex;
  align-items: center;
  gap: 20px;
}

@container (max-width: 420px) {
  .product-card__content {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .product-card__title {
    font-size: 1.15rem;
  }
}

Перевірка та типові помилки

Після додавання CSS перевірте сторінку в адаптивному перегляді Elementor, але не обмежуйтеся лише зміною ширини viewport. Важливо перевірити компоненти в реальному контексті: у колонці, сайдбарі, Loop Grid і всередині вкладених контейнерів.

Якщо правило не спрацьовує, спочатку перевірте структуру DOM і назви класів. Контейнерний запит діє на нащадків контейнера. Він не застосовується до самого елемента-контейнера так, як часто очікують початківці.

Також перевірте, чи не перекривають нові правила стилі Elementor, теми або плагінів. Уникайте бездумного використання `!important`: спершу уточніть селектори та порядок підключення стилів.

• клас додано з помилкою або з крапкою в полі Elementor;
• у CSS використано `.card-area`, але клас призначено не батьківському контейнеру;
• картка не є нащадком контейнера;
• запит перевіряє інший, ближчий вкладений контейнер;
• у картки є фіксована ширина, яка не дає їй коректно стискатися;
• вміст має довгі слова, зображення або кнопки, що переповнюють вузький блок;
• кеш CSS не оновився після збереження змін.

Що саме протестувати

Зменшуйте ширину не лише вікна браузера, а й самої колонки, де розміщена картка. Окремо перевірте граничні значення біля 520 пікселів: перехід має відбуватися передбачувано, без стрибків і горизонтального прокручування.

Переконайтеся, що на вузькій ширині не обрізаються заголовки, ціни, кнопки та зображення. Після цього протестуйте сторінку в актуальних браузерах і на реальних пристроях, оскільки редактор Elementor не завжди відтворює всі особливості фінального шаблону.

Як поєднувати container queries з адаптивними стилями Elementor

Не потрібно переносити всю адаптивність сайту в container queries. Глобальні зміни — наприклад, перехід головної секції з чотирьох колонок у дві або зміна мобільного меню — логічно залишити на рівні media queries та стандартних адаптивних налаштувань Elementor.

Container queries краще використовувати для внутрішньої логіки компонента. Такий поділ спрощує підтримку: Elementor керує загальною композицією сторінки, а CSS-компонент сам визначає, як поводитися в межах отриманого простору.

Починайте з одного компонента та кількох зрозумілих порогів. Надмірна кількість умов ускладнює налагодження і може створити конфлікти між стандартними адаптивними стилями та власним CSS.

• media queries — для структури всієї сторінки;
• container queries — для карток і автономних блоків;
• адаптивні налаштування Elementor — для простих змін, які не потребують складної логіки;
• власний CSS — для повторюваних компонентів і точного контролю.