[Урок 35] Интернет-магазин на Zero Block (1 экран - часть 3)

Привет бандиты, продолжаем делать интернет магазин на Zero Block. В прошлой части мы доделали первый экран и добавили меню.

Сегодня займёмся нашим любимым делом - оптимизацией. Приступаем!

Открываем Zero Block.

Открываем блок нулевого блока и выбираем в верхнем баре экран 320-480px (мобильная версия).

Выглядит не оптимистично. Поправим.

Начнём в размера экрана.

Нужно слегка растянуть рабочую область. Сейчас она 650 пикселей по высоте.
Открываем настройки и увеличиваем Grid Container Height до 900 пикселей. В процессе возможно увеличим/уменьшим эту область.

Работаем с текстовыми блоками.

Приступим к работе с текстом. Всё что нам нужно это сузить область контейнера и немного уменьшить размер шрифта.

Заголовок: размер шрифта ставим 29.

Описание: размер уменьшаем до 16. Не забываем уменьшать ширину контейнера текста.

Перемещаем кнопки.

Кнопки просто помещаем друг под другом и выравниваем по центру.

Самое сложное - изображения.

Нужно было заранее решить, куда будем помещать изображения (траву и кувшин с молоком). Я решил, что поставим их в самый низ страницы.

Уменьшаем размер обоих элементов. Молоко у меня получилось 256 пикселей по ширине, а трава 356 пикселей по ширине.

Устанавливаем объекты в самый низ контейнера рабочей области. Включаем в настройках объектов мобильную анимацию!

Сохраняем, закрываем и публикуем. Проверяем.

Всё по плану. Сохраняем.
В следующем уроке мы захватим тему меню (специально не стал трогать его в этом) и продолжим делать наш сайтец.

Всем пис!)