[Урок 24] Первый сайт на Zero Block (6 часть - оптимизация на мобильные устройства)

Всем привет! Мы закончили главный блок сайта на Zero, но не оптимизировали его под мобильные устройства.

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

Переходим в режим редактирования

В верхнем баре можно увидеть панель с устройствами.

Будем идти с самого начала. Мы уже сделали версию под десктоп (1200 пикселей), начнём с мобильной.

Заметно, что все объекты просто не поместятся в блок. Уменьшим их.
Переходим к настройкам текста и ставим размер : 32пх для верхней надписи заголовка и 29пх для нижней.

Заголовок перемещаем наверх контейнера. По центру вставим изображение.

Монеты аналогично перетаскиваем в центр экрана. Нажимаем на каждую из монет, открываем настройки и в самом конце нажимаем Mobile animation - Switch on. Таким образом мы включим мобильную анимацию.

Перетаскиваем описание и кнопки к центру контейнера, под изображение. Устанавливаем.

Внимание! Нужно растянуть длину всего блока, иначе объекты не поместятся! Я поставил 750 пикселей!

Закроем, сохраним. Посмотрим как выглядит сайт на смартфоне:

Отлично. Делаем все остальные разрешения по аналогии.

Жаль, но Zero Block еще не научился оптимизировать себя сам, приходится делать всё самим.

На этом всё. Читайте другие уроки, обучайтесь, всем успехов!)