[Урок 26] Первый сайт на Zero Block (8 часть - адаптируем второй блок)

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

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

Переходим ко второму блоку

Вот, что у нас есть на данный момент. Открываем мобильную версию (жмём на телефончик в верхнем баре) и видим, что всё выглядит максимально коряво. Исправим это - поменяем размер некоторых шрифтов, сделаем выравнивание.

Начнём с основного - увеличим длину страницы

Страница сужается, а это значит, что её высота не может оставаться неизменной. Открываем настройки фона и в поле "Grid Container Height" ставим значение 1000. Надеюсь этого хватит.

Работаем с фоновым объектом

На фоне у нас была цифра "3". Давайте займёмся ей. Остальные текстовые блоки я растащил по сторонам (для удобства), а вот цифру помещаем прямо по центру.

Не забывайте, что мы блокировали объект в настройках! Нужно вернуться туда, нажать на кнопочку "Unlock"!

Теперь выделяем все 3 объекта (две цифры и текст), в настройках жмём на to grid container (выравнивание относительно контейнера) и центруем все объекты.

Готово. Так как текстовые объекты будут накладываться нас на фоновые цифры - сделаем их более прозрачными. Таким образом мы понизим их контрастность и текст будет читаться лучше.

Для этого переходим к настройкам и ищем параметр "Opacity". У каждого из объектов уменьшаю прозрачность до 45%.

Готово! Не забываем блокировать все объекты на фоне.

Приступаем к работе с текстом.

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

Вариант 1. Сократить контейнер блока

Выглядеть это будет как-то так. Мне данный вариант не нравится, поэтому я просто уменьшу размер шрифта.

Вариант 2. Поиграться со шрифтами

Сейчас у нас стоит размер 30, уменьшу его до 22.

Выглядит замечательно. Повторяем действия с остальными блоками.

В заголовках "День 3 и День 4" мы делали выравнивание по правому краю, тут можем вернуть выравнивание по левому, так как теперь тексты стоят друг под другом в одной колонке.

Последний штрих

Выделяем все текстовые блоки, открываем настройки и выравниваем их по центру контейнера (по горизонтали).

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

Выглядит отлично. Не забывайте, что подобные действия по адаптации нужно повторить с другими разрешениями!

На этом всё - ждите новых уроков и обучайтесь! Всем мир!)