Страница уехала вбок на 48 пикселей: min-width:auto в grid

На телефоне страницы товара можно было таскать пальцем вбок, а часть вкладок уезжала за край. Виноват один элемент со значением min-width по умолчанию.

Горизонтальная прокрутка на телефоне — это всегда конкретный виновник, а не «вёрстка поехала». Задача только в том, чтобы его найти замером, а не глазами.

Замер до правки

390px  16 из 20 страниц товара   +48 px
360px  те же                     +78 px
320px  те же                    +118 px
       главная при 320          +41 px
       контакты при 320         +37 px

Дальше — поиск элемента, который вылезает: перебор узлов с проверкой, что правый край дальше края экрана. Виновником оказалась строка вкладок «Описание / Характеристики / Доставка»: ей нужно 408 пикселей при доступных 358, а сжиматься она отказывалась.

Почему отказывалась

У элементов grid и flex минимальная ширина по умолчанию не ноль, а «по содержимому». Пока внутри короткий текст — незаметно. Появился длинный — элемент раздувается и тянет за собой всю колонку, а потом и страницу.

Лечение и результат

390 / 360 / 320   все 15 проверенных страниц   +0 px
вкладки: два ряда, все три подписи видны, ничего не обрезано
десктоп 1440: геометрия до и после совпадает