Процесс настройки мобильного отображения в Gridbox происходит в реальном времени непосредственно в визуальном редакторе. Конструктор позволяет мгновенно переключаться между устройствами для точечной подгонки интерфейса, исключая необходимость ручной прописи медиа-запросов (media queries) в CSS-файлах.
1. Переключение режимов адаптивности
Для перехода к редактированию адаптивных слоев используйте верхнюю панель инструментов (Admin Toolbar):
- ■ Нажмите на одну из иконок устройств в центре верхней панели: Laptop (Ноутбук), Tablet (Планшет) или Phone (Смартфон).
- ■ Рабочая область редактора мгновенно сожмется до выбранных пиксельных границ, показывая точную эмуляцию того, как сайт выглядит на конкретном гаджете.
2. Изменение ширины колонок на мобильных
По умолчанию Gridbox выстраивает многоколоночные строки в одну вертикальную линию на смартфонах. Если вам нужно сохранить сетку (например, вывести две иконки или два товара в один ряд):
- ■ Переключитесь в режим Phone.
- ■ Наведите на нужную колонку, откройте её параметры (Column Settings) и перейдите во вкладку Layout.
- ■ В поле Column Width вместо дефолтных 100% задайте, например, 50%. Сделайте то же самое для соседней колонки — они выстроятся горизонтально на одном экране.
Если при настройке отступов или шрифтов на смартфонах вы запутались и пережали макет, вам не нужно переверстывать блок. В параметрах любого адаптивного свойства рядом с иконкой телефона есть кнопка сброса (значок круговой стрелки). Клик по ней мгновенно удаляет локальное мобильное правило и возвращает элементу наследуемый стиль с десктопной версии.
3. Локальное переопределение отступов
Большие внешние поля (Margins), которые отлично смотрелись на мониторах, на экранах телефонов превратят контент в узкую нечитаемую полосу. Порядок исправления:
- ■ Находясь в режиме Phone, откройте параметры проблемного плагина или секции.
- ■ Во вкладке Design (или Layout) скорректируйте значения полей
PaddingиMargin(например, уменьшите боковые отступы секции с 80px до 15px). - ■ Убедитесь, что вносимые изменения не ломают отображение на планшете, поднявшись по каскаду на один шаг назад.
Эмулятор Gridbox в админке дает отличную точность, но физический рендеринг мобильных браузеров (особенно мобильного Safari на iOS) может преподносить сюрпризы с высотой первого экрана (проблема 100vh из-за скрывающейся плашки адреса). После завершения мобильной верстки обязательно откройте сайт с реального смартфона и проверьте критические узлы: форму заказа, кликабельность кнопок в меню и отсутствие горизонтального скролла (пальцевого вылета за границы экрана).