01Создай набор неудобных данных

Подготовь длинный заголовок, цену с дробной частью, имя из нескольких слов, карточку без картинки и десять тегов. Это рабочие условия, а не исключения. Проверяй компоненты на этих данных до того, как размножишь их по страницам.

02Опиши поведение вместо размеров

Укажи, что переносится, что сокращается, что растёт по высоте и где появляется прокрутка. Для кнопки важнее сохранить название действия, чем удержать заданную ширину. Для таблицы нужно отдельно решить, остаётся ли сравнение понятным на телефоне.

03Проверь промежуточную ширину

Между телефоном и большим экраном есть состояния, где колонки уже тесные, а мобильная компоновка ещё не включилась. Плавно меняй ширину. Следи за порядком чтения, переносами навигации и элементами, которые выходят за контейнер.

04Пример карточки услуги

Название «Разработка многостраничного сайта для международной команды» занимает четыре строки. Карточка растёт по высоте, цена остаётся рядом с единицей оплаты, действие располагается после описания. Фиксированная высота с обрезанным текстом здесь скрыла бы смысл услуги.

05Настоящее содержание показывает слабые места макета

Представь три карточки с короткими названиями. Они аккуратно помещаются в ряд. После замены на реальные услуги одно название занимает четыре строки, цена съезжает, а кнопки оказываются на разной высоте. Проблема существовала и раньше, но примерные тексты её скрывали.

Проверь длинные названия и разные объёмы описаний до финальной передачи. На телефоне не обязательно сохранять расположение компьютера. Карточки можно поставить друг под другом, чтобы человеку не приходилось читать узкие столбцы и искать маленькие кнопки.