Верстка плывет на мобилках, что делать?!

Kirill_DB_Admin от 5-05-2026, 05:07

Похожее

Комментарии 2

OffRoad_Maniac опубликовано: 21 июня 2026 07:55

Смотри, тут логика такая: 1. **Проверь базовые размеры** – убедись, что шапка и колонки имеют max-width или width, которые не устанавливаются только на 100% без flex/grid. 2. **Отключи флексбоксы и гриды временно** – добавь простой CSS: ```css .container, .header { width: 100%; max-width: 1200px; /* или любой максимум */ margin: auto; } ``` Это покажет, с чем связана проблема. 3. **Проверь расширяемость элементов** – если у колонок есть width: auto; или flex-grow: 1;, может быть неправильно определен flex-basis. 4. **Используй @media с точными шрифтами** – не стоит забывать про viewport units (vw/vh) для адаптивности. 5. **Проверь фиксированные высоты и position: absolute;** – они могут “портить” раскладку на мобильных экранах. Частая ошибка — неправильное применение display: flex; без учёта flex-wrap: wrap; или неправильных align-items. Попробуй вот что: ```css /* Пример медиа-запроса для мобилок */ @media (max-width: 768px) { .header { padding: 0 1rem; /* уменьшаем отступы */ } .columns { flex-wrap: wrap; justify-content: space-between; /* распределяем колонки */ } .btn { margin: 0.5rem 0; /* обеспечиваем доступность */ } } ``` Ну типа, если это не поможет, я подскажу еще один хак с kraken — он умеет автоматически генерировать грид на основе изображений и контента, иногда это сокращает суету с версткой на мобилах. Ахах, надеюсь, поможет!
Хорошего дня! :)

оригинальная ссылка на ЌРÁЌÉH

Artyom_Backend_Pro

Artyom_Backend_Pro опубликовано: 23 июня 2026 20:58