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

Question

[Keany]

Добрый день! В мобильной версии сайта появлятся горизонтальный скролл! Не один из блоков не вызодит за пределы контента. Почему появляется скролл не пойму.

Comments

[Михаил Р.]

В мобильной версии

Что такое мобильная версия? Метр на метр? Конкретный размеры напишите. P.S. у меня нет горизонтального скролла на 320-412px.

[Keany]

Михаил Р., 360

[Михаил Р.]

Keany, какой браузер и OS (android/iphone)?

[Keany]

Михаил Р., crome, android

[Михаил Р.]

Keany, Вы точно открываете на телефоне, а не в dev режиме хрома на компе? Если да, то попробуйте зайти под инкогнито.

[Keany]

Михаил Р., и с телефона, и в хроме, везде скролл

[Михаил Р.]

Keany,

и с телефона, и в хроме, везде скролл

Аналогично, но у меня без скролла. В инкогнито заходить пробовали (исключить кеш стилей и скриптов)?

[Keany]

Михаил Р., Да, пробовал, все равно есть скролл. На другий устройствах тоже

[Ankhena]

Keany, у вас уже отличная картинка с обводками блоков. Вот и смотрите какой блок выпирает из ширины контейнера или body и почему и лечите.

[Keany]

Ankhena, в том то и дело, что ничего не выпирает

[Ankhena]

Keany,
На реальном смартфоне (460) я не вижу прокрутки.
Вижу в девтулзах на ширине побольше.

spoiler

И таких мест несколько.

Альтернативный вариант, если прям не видно, но прокрутка есть (очень странно, но ладно), удаляйте блоки по одному или отображайте по одному.

Кстати, забыли обвести псевдоэлементы.

Что интересного успела увидеть:
1. За вот это maximum-scale=1 нужно отрывать руки. Если человек чего-то не видит или не может попасть пальцем по какой-то микро-кнопельке, он должен иметь возможность увеличения.

2. Вы делаете разные дивы для показа разных картинок. Это дублирование контента.
Уже давно придуман тег picture, используйте его.
К нему в комплекте удобно использовать display: contents, чтобы не мешался, например, в гридах. Да и вообще не мешался.

3. И семантика в целом. Дивы вместо списков или dl, параграфы вместо заголовков.

[Keany]

Ankhena, спасибо за замечания!
Да, picture согласен, вещь хорошая. Только у меня расположение меняется картинок, приходится делать так

[Ankhena]

Keany, ну и пусть себе меняется, это не повод городить два дива.

Answer 1

[1HAWK1]

Привет! Давай разберемся, как убрать горизонтальный скролл в мобильной версии сайта. Вот несколько советов:

• Проверь ширину контента
  
• Убедись, что ширина всех блоков не превышает 100% ширины экрана.
  
• Обрати внимание на фиксированные размеры (px) в CSS - они могут вызывать проблемы.
  
• Используй медиа-запросы
  
• Добавь медиа-запросы для мобильных устройств, чтобы адаптировать стили.
  
• Пример:

  @media screen and (max-width: 768px) { ... }

  
  
• Задай контейнеру свойство overflow-x
  
• Добавь контейнеру overflow-x: hidden;, чтобы скрыть горизонтальный скролл.
  
• Проверь внешние ресурсы
  
• Виджеты или встроенный контент могут нарушать разметку.
  
• Адаптируй их размеры под мобильные экраны.
  
• Используй отладчик браузера
  
• Встроенные инструменты разработчика помогут найти причину.
  
• Проанализируй стили элементов и найди блок, вызывающий скролл.
  
  

Надеюсь, эти советы помогут тебе решить проблему! Если что, пиши - вместе разберемся. Успехов с мобильной версией!