Адаптив в Zero Block ломается не из-за дизайна, а из-за 5 мелких ошибок

Адаптив в Zero Block ломается не из-за дизайна, а из-за 5 мелких ошибок

Главная ловушка — верстать только под один экран и потом «дотягивать» остальные. В Zero Block сначала проверь базу: ширину контейнера, отступы у текста, поведение кнопок и картинок на границах экрана. Если элемент живёт только в одной точке, адаптив будет рассыпаться.

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

Отдельно проверь изображения: если у них нет понятной точки привязки, при уменьшении экрана они перекрывают текст или визуально «прыгают». Для сложных экранов лучше заранее задать, что должно быть главным: заголовок, картинка или кнопка. Тогда при сжатии страницы логика сохранится.

Ещё одна типовая ошибка — скрывать проблему на одном брейкпоинте и не чинить её в основе. Рабочий подход такой: сначала исправляешь композицию на десктопе, потом проверяешь планшет, потом мобильный. Если адаптив строится по этому порядку, правок будет в разы меньше.