CSS
Адаптивная вёрстка
Собираем сетку, которая помещается на телефоне и использует пространство на большом экране.
Начните с одной колонки
На узком экране карточки читаются сверху вниз. Когда места достаточно, сетка сама добавляет колонки. Длинный текст не должен расширять страницу.
.cards {
display: grid;
grid-template-columns: repeat(
auto-fit, minmax(min(100%, 16rem), 1fr)
);
gap: 1rem;
}
.cards img {
max-width: 100%;
height: auto;
}Укажите ширину области просмотра
Добавьте в head метатег, чтобы мобильный браузер использовал ширину устройства.
<meta name="viewport"
content="width=device-width, initial-scale=1">Найдите причину прокрутки
Проверьте страницы на узкой ширине и с увеличенным текстом. Частые причины горизонтальной прокрутки — фиксированная ширина блока, широкая таблица и длинная строка кода. Ограничьте прокрутку самим широким блоком.