yourniceshot
@yourniceshot
уточка-фронтендер

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

На некоторых брейкпойнтах на адаптивном сайте появляется скролл справа на 1-2 пикселя, не могу понять, в чем проблема. Ни один блок ничего не переполняет, практически везде ширина в процентах (до 100%), суть в том, что этот скролл не убирает даже overflow: hidden, который я пробовала ставить на каждый блок, на пэйдж, на боди..
  • Вопрос задан
  • 176 просмотров
Пригласить эксперта
Ответы на вопрос 1
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Проверяйте фиксированную ширину блоков.
Например, на разрешении от 380 до 395 у вас горизонтальный скролл из-за фиксированной ширины 380px у элемента "searcher__search" и некоторых его потомков.

Скорее всего на других брейкпоинтах таже проблема. Задавайте фиксированную ширину основному слою (у вас это "page"), внтуренним оберткам \ контейнерам задавайте ширину в процентах.

5dd6632b1c50b881812192.png

P.S. Моя ошибка, с шириной все ок )
просто нужно смотреть в эмуляторе мобильного устройства, иначе стандартный десктопный скролл будет учитываться в ширине экрана.
Т.е. допустим, у основного слоя фиксированная ширина 380px, десктопный вертикальный скролл съедает несоклько пикселей и по этому, чтобы все влезло, браузер добавляет горизонтальный скролл.
Так что на мобильном все должно быть ок. Но в любом случае для моб устройств делайте резиновую верстку, указывайте ширину в процентах.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы