Привет, друзья! 👋
Вы когда-нибудь открывали свой сайт на телефоне и замечали, что можно прокручивать страницу вбок, хотя вроде бы всё должно помещаться на экране? 🤔 Это называется горизонтальной прокруткой, и она может испортить впечатление от вашего сайта на мобильных устройствах. Давайте разберёмся, как это исправить!
🧐 Почему появляется горизонтальная прокрутка?
✅ Чаще всего причина в том, что какой-то элемент на странице выходит за пределы видимой области экрана. Это может быть:
⚠ Изображение или видео, которое слишком широкое.
⚠ Блок с фиксированной шириной, не адаптированный под мобильные устройства.
⚠ Отрицательные отступы или неправильные настройки позиционирования.
🛠 Как найти проблемный элемент?
✅ Используем инструменты разработчика:
1. Откройте ваш сайт в браузере Google Chrome.
2. Нажмите правой кнопкой мыши на странице и выберите «Просмотреть код» (или нажмите Ctrl+Shift+I).
3. Перейдите во вкладку «Консоль» (Console).
4. Наберите вручную следующий код и нажмите Enter:
allow pasting
(это нужно, потому что Chrome не разрешает сразу вставлять код — он заботится о вашей безопасности ❤)
5. После этого вставьте следующий код и снова нажмите Enter:
(function (d) {
var w = d.documentElement.offsetWidth,
t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
b;
while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0) {
t.currentNode.style.setProperty(‘outline’, ‘2px solid red’, ‘important’);
console.log(t.currentNode);
}
};
}(document));
Этот скрипт выделит красной рамкой элементы, выходящие за пределы экрана.
✅Проверяем вручную:
Откройте сайт на мобильном устройстве или в режиме эмуляции мобильного экрана в браузере.
Прокрутите страницу вбок и посмотрите, какой элемент выходит за границы.
🧹 Как исправить?
❗ Вариант 1: Настройки в Elementor
1. Откройте страницу в редакторе Elementor.
2. Найдите секцию или виджет, который выходит за пределы экрана.
3. Перейдите во вкладку «Дополнительно» (Advanced).
4. В разделе «Адаптивность» (Responsive) установите значение «Скрыть переполнение» (Overflow: Hidden).
❗ Вариант 2: Добавление CSS-кода
Если проблема возникает на нескольких страницах, можно добавить следующий CSS-код:
html, body {
overflow-x: hidden;
}
Этот код скроет горизонтальную прокрутку на всём сайте.
✅ Полезные советы
1. Избегайте фиксированных ширин: Используйте относительные единицы измерения (%, em, rem) вместо пикселей.
2. Проверяйте отступы: Убедитесь, что отступы и поля не выходят за пределы экрана.
3. Тестируйте адаптивность: Регулярно проверяйте, как ваш сайт отображается на разных устройствах.
Надеюсь, этот пост помог вам разобраться с проблемой горизонтальной прокрутки на мобильных устройствах. Если у вас остались вопросы или нужна помощь, не стесняйтесь обращаться! 😊