Сайт на телефоне шире экрана и двигается вбок: как исправить
Что это значит
Мы открыли главную в браузере с экраном телефона (390 пикселей), и страница оказалась шире экрана. Какой-то элемент — картинка, таблица, слайдер, длинная ссылка или блок с заданной шириной — вылезает за правый край.
Чем мешает
Посетитель видит обрезанную страницу, она «болтается» вбок при прокрутке, часть текста и кнопок не видна. Это раздражает и выглядит как сломанный сайт. Google и Яндекс учитывают удобство на телефоне.
Как исправить
WordPress
- Откройте сайт на компьютере в Chrome, нажмите F12, затем значок телефона (режим устройства) и выберите ширину 390. Пролистайте страницу и найдите блок из примеров отчёта, который выходит за край.
- Если это таблица, картинка или видео в тексте — добавьте в «Внешний вид → Настроить → Дополнительные стили» код из примера ниже.
- Если вылезает блок конструктора (Elementor и т. п.), откройте его настройки для мобильной версии и уберите фиксированную ширину или отрицательные отступы.
Tilda
- Откройте страницу в редакторе и включите предпросмотр мобильной версии. Блоки Zero Block настраиваются отдельно для каждой ширины экрана: проверьте, чтобы элементы не выходили за правую границу на ширине 320–480.
- Широкие таблицы и вставленный код (блок T123) оберните в контейнер с прокруткой или уменьшите ширину.
1С-Битрикс
- Найдите блок из примеров отчёта в режиме телефона браузера (F12 → значок телефона). Ширину правят в стилях шаблона (template_styles.css) — это задача для разработчика.
- Таблицы в текстах из визуального редактора часто имеют ширину в пикселях: уберите её или оберните таблицу в блок с прокруткой.
OpenCart
- Найдите блок из примеров в режиме телефона браузера. Чаще всего вылезают таблицы и картинки в описаниях товаров: им помогает код из примера ниже (в файле стилей темы).
- Если вылезает модуль (слайдер, меню), проверьте его настройки для мобильных или обновите модуль.
Другой движок или свой сервер
- Откройте сайт в режиме телефона (Chrome: F12 → значок телефона, ширина 390) и найдите блок из примеров отчёта.
- Уберите у него фиксированную ширину в пикселях, большие отступы или переделайте в адаптивный (max-width: 100%).
- Широкие таблицы оберните в блок с прокруткой внутри (overflow-x: auto), длинным ссылкам разрешите перенос.
Пример кода
Замените example.by на адрес своего сайта.
/* картинки, видео и таблицы не шире экрана */
img, video, iframe { max-width: 100%; height: auto; }
/* длинные слова и ссылки переносятся */
body { overflow-wrap: anywhere; }
/* широкая таблица прокручивается внутри своего блока */
.table-wrap { overflow-x: auto; }Не прячьте проблему стилем overflow-x:hidden для всей страницы: прокрутка пропадёт, но вылезающий блок останется обрезанным, и часть содержимого будет не видна.
Мы проверяем только главную страницу. Проверьте вручную и другие важные страницы: каталог, карточку товара, контакты.
Если сайт делал подрядчик
Перешлите ему ссылку на отчёт и эту просьбу:
На телефоне (ширина экрана 390 px) главная страница шире экрана и прокручивается вбок. Элементы, которые выходят за край, указаны в отчёте. Исправьте, пожалуйста, вёрстку, чтобы на ширине 320–430 px страница помещалась в экран без горизонтальной прокрутки.
Как проверить, что всё исправлено
Проверьте сайт снова на yasnoseo.by.