Як прибрати горизонтальний скрол у Flexbox-контейнерах Elementor

Чому Flexbox-контейнер створює переповнення

Flexbox за замовчуванням намагається зберегти вміст дочірнього елемента видимим. Для flex-item мінімальна ширина часто визначається його контентом: довгим словом, посиланням, зображенням, таблицею або елементом із white-space: nowrap.

Наприклад, контейнер може мати ширину 360 px на смартфоні, але заголовок або URL усередині нього фактично потребує 500 px. Батьківський контейнер не завжди може змусити такий елемент стиснутися, тому сторінка стає ширшою за екран.

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

• довгі URL і email-адреси без пробілів;
• заголовки або технічні назви з довгими словами;
• зображення чи відео без обмеження максимальної ширини;
• таблиці, код і pre-блоки;
• CSS-властивість white-space: nowrap;
• фіксована ширина або мінімальна ширина внутрішнього елемента.

Базове виправлення: min-width: 0

Властивість min-width: 0 дозволяє flex-елементу зменшуватися до ширини, яку визначає його батьківський контейнер, навіть якщо вміст ширший. Це не обрізає контент і не приховує переповнення, а змінює правило мінімальної ширини самого flex-item.

Для зручності дочірньому контейнеру або проблемному елементу в Elementor можна призначити клас flex-item. Назва класу не є обов’язковою — важливо, щоб вона збігалася в налаштуваннях елемента та CSS.

• Виберіть дочірній контейнер або інший flex-елемент, який створює переповнення.
• У полі CSS Classes додайте клас flex-item без крапки.
• Додайте CSS у Custom CSS Elementor, якщо ця можливість доступна у вашій конфігурації, або в CSS теми чи вбудованому розділі додаткових стилів WordPress.
• Очистіть кеш сайту та браузера, якщо зміни не видно одразу.

.flex-item {
  min-width: 0;
}

Як переносити довгі URL і слова

Одного min-width: 0 іноді недостатньо. Він дозволяє контейнеру стиснутися, але довгий рядок усередині все одно може виступати за його межі. Для таких випадків потрібне перенесення рядків.

Властивість overflow-wrap: anywhere дозволяє браузеру переносити довгі слова, URL та технічні рядки в будь-якому місці. Це практичне рішення для мобільних екранів, де важливо зберегти весь текст доступним без горизонтальної прокрутки.

• Застосовуйте правило до конкретного проблемного контейнера, якщо потрібно зберегти стандартне перенесення в інших частинах сторінки.
• Для URL, email і технічних рядків anywhere зазвичай працює надійніше, ніж перенесення лише за пробілами.
• Перевірте довгі слова в заголовках, кнопках, бейджах і хлібних крихтах.

.flex-item {
  min-width: 0;
}

.flex-item * {
  overflow-wrap: anywhere;
}

Коли не варто застосовувати правило до всіх дочірніх елементів

Селектор .flex-item * охоплює всі елементи всередині контейнера. Це зручно як швидке рішення, але воно може змінити перенесення тексту в кнопках, навігації або спеціальних компонентах. Якщо проблема локальна, краще використовувати точніший клас.

• для тексту: .flex-item .elementor-heading-title, .flex-item p;
• для посилань: .flex-item a;
• для окремого віджета: додайте йому власний клас і стилізуйте лише цей клас.

.flex-item a,
.flex-item .elementor-heading-title {
  overflow-wrap: anywhere;
}

Як знайти елемент, який виходить за межі екрана

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

У DevTools браузера можна вибрати підозрілий елемент і перевірити його фактичну ширину, min-width, width, flex-basis, white-space та overflow. Якщо ширина дочірнього елемента більша за батьківський контейнер, перевірте його власні стилі та стилі вкладених елементів.

Зверніть увагу на горизонтальне переповнення не лише тексту, а й зображень, іконок, таблиць та сторонніх віджетів. Іноді скрол створює елемент із від’ємним margin або абсолютним позиціонуванням, тому min-width: 0 у такій ситуації не буде основним рішенням.

• перевірте всі рівні вкладених Flexbox-контейнерів;
• порівняйте ширину елемента з шириною батьківського контейнера;
• знайдіть фіксовані width і min-width у мобільних налаштуваннях;
• перевірте, чи немає nowrap, широкої таблиці або великого зображення;
• після кожної зміни тестуйте сторінку саме на вузькій ширині.

Що перевірити в адаптивних налаштуваннях Elementor

CSS виправляє правило стискання, але не замінює адаптивне налаштування макета. Якщо для контейнера або віджета задана фіксована ширина, перевірте її окремо для мобільного режиму. Також перегляньте внутрішні відступи, проміжки між елементами та напрямок Flexbox.

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

Зображення зазвичай мають залишатися в межах контейнера. Для них часто потрібне правило max-width: 100%; height: auto;, але його слід застосовувати з урахуванням конкретного віджета та стилів Elementor.

• перевірте ширину та min-width на мобільному брейкпоінті;
• перегляньте padding і gap контейнерів;
• перевірте налаштування Flex Direction і Wrap;
• переконайтеся, що кнопки та меню не мають примусового nowrap без потреби;
• окремо протестуйте landscape-орієнтацію смартфона.

Чому overflow-x: hidden — не найкраще основне рішення

Властивість overflow-x: hidden приховує частину вмісту, яка виходить за межі сторінки. Горизонтальний скрол може зникнути візуально, але причина залишиться: текст, кнопка або інший важливий елемент може бути обрізаний і недоступний користувачу.

Таке правило іноді доречне для контрольованих декоративних ефектів, наприклад анімації, що навмисно виходить за межі секції. Але для довгого тексту або помилки в Flexbox-структурі спочатку потрібно виправити ширину, min-width, перенесення і адаптивні стилі.

• не використовуйте hidden як заміну пошуку проблемного елемента;
• не приховуйте переповнення на body або всій сторінці без перевірки контенту;
• після виправлення перевірте, чи не обрізаються фокус клавіатури, меню або інтерактивні елементи.

Фінальна перевірка після внесення змін

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

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

• перевірте кілька ширин екрана, а не лише одну;
• протестуйте довгі URL, заголовки та email-адреси;
• перевірте сторінку після очищення кешу;
• переконайтеся, що CSS-клас додано саме потрібному дочірньому елементу;
• якщо проблема залишилася, шукайте фіксовану ширину, абсолютне позиціонування або широкий сторонній віджет.