Убираем горизонтальный скролл в мобильной версии сайта

Admin CSS, WordPress

Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить css стили, чтобы скроллинг влево и вправо при просмотре через телефон не работал. Это же касается отключения горизонтальной прокрутки на iPhone.

Для выполнения этих задач нужно в стилях CSS своего сайта прописать следующее:

html, body {
    /* Убирает прокрутку по горизонтале, для мобильной версии */
    overflow-x: hidden;
}

Чтобы убрать горизонтальный скролл одного HTML тега html или body не всегда достаточно, чтобы прокрутка исчезла. Обязательно нужно добавить overflow-x: hidden; к обоим тегам.

Если это не помогает, значит нужно искать ошибки в дизайне сайта. Какой-то элемент в дизайне сайта выходит за края и тем самым стиль overflow-x: hidden; перестаёт работать.

У меня так случилось с плагином Antispam Bee на сайте WordPress. Версия плагина 2.7.0 работала отлично, а как вышла версия 2.7.1, то плагин внёс в дизайн сайта какой-то лишний элемент.

Я долго искал причину ошибки, прежде чем понял, что причина вызвана плагином. Сначала пришлось потратить несколько часов и перелопатить весь css код на своём сайте. И только когда ничего не помогло, пришла догадка, что возможна причина в некорректном вмешательстве плагинов в работу сайта.

Как оказалось плагин Antispam Bee вносил что-то своё в дизайн формы комментариев. При этом видимого изменения не было.

А внутри HTML кода он вносил изменения и эту форму:

<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea>

Менял на следующую:

<textarea autocomplete="nope" id="comment" name="b238630f01" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea>

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

Я так и не нашёл как победить эту ошибку, не изменяя свои стили. Пришлось внести коррективы у себя в CSS. Вместо указанного стиля у себя на сайте:

#respond form input[type="text"], #respond form textarea {
    width: 100%;
}

Я уменьшил поле комментариев со 100% до 97%.

#respond form input[type="text"], #respond form textarea {
    width: 97%;
}

После этого возможность горизонтального скролинга исчезла.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Комментарии к статье “Убираем горизонтальный скролл в мобильной версии сайта” (9)

  • Аватар
    Юрий
    15.02.2019 в 18:21

    У меня сайт без плагина, делал адаптивную верстку давно. А сейчас стал замечать, есть горизонтальная прокрутка в одну сторону с права на лево. Не знаю что и делать, только догадываюсь, что где-то править надо. А где? Сайт mycompplus.ru

    • Admin
      Admin
      Автор записи
      16.02.2019 в 11:38

      На разрешении в 768 у вас примешивается стиль pill_m, в котором задано width: 768px !important;. Этот участок нужно переписать.

  • Аватар
    Sam
    28.08.2020 в 14:47

    Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru

    • Admin
      Admin
      Автор записи
      29.08.2020 в 01:51

      Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали 🙂 Вам надо поставить overflow-x: hidden;.

  • Аватар
    Sam
    29.08.2020 в 18:49

    Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле»

    P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.

  • Аватар
    Sam
    30.08.2020 в 13:04

    Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!

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

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Убираем горизонтальный скролл в мобильной версии сайта"