📱 Горизонтальная прокрутка на мобильных устройствах: как исправить?

Привет, друзья! 👋

Вы когда-нибудь открывали свой сайт на телефоне и замечали, что можно прокручивать страницу вбок, хотя вроде бы всё должно помещаться на экране? 🤔 Это называется горизонтальной прокруткой, и она может испортить впечатление от вашего сайта на мобильных устройствах. Давайте разберёмся, как это исправить!

🧐 Почему появляется горизонтальная прокрутка?

✅ Чаще всего причина в том, что какой-то элемент на странице выходит за пределы видимой области экрана. Это может быть:

⚠ Изображение или видео, которое слишком широкое.

⚠ Блок с фиксированной шириной, не адаптированный под мобильные устройства.

⚠ Отрицательные отступы или неправильные настройки позиционирования.

🛠 Как найти проблемный элемент?

✅ Используем инструменты разработчика:

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. Тестируйте адаптивность: Регулярно проверяйте, как ваш сайт отображается на разных устройствах.

Надеюсь, этот пост помог вам разобраться с проблемой горизонтальной прокрутки на мобильных устройствах. Если у вас остались вопросы или нужна помощь, не стесняйтесь обращаться! 😊

Мы в соцсетях

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

О, привет 👋 Приятно познакомиться.

Подпишитесь, чтобы получать замечательный контент каждый месяц.

Мы не спамим! Прочтите нашу политику конфиденциальности, чтобы узнать больше.

На развитие школы

Любая сумма поможет нам развиваться

Хостинги