Испытания

Адаптивность на Flex

CSS: Flex

Данное испытание потребует от вас навыков поиска решения методом проб и ошибок.

Иногда, для создания адаптивной вёрстки можно прибегать к хитростям, не лежащим на поверхности. Ваша задача — адаптировать для больших разрешений представленную страницу.

Страница без адаптива

Страница состоит из двух частей:

  • Меню
  • Основной контент

Сейчас, на всех разрешениях экрана меню располагается сверху, а под ним находится контентная часть. Ваша задача — при ширине viewport от 1040px расположить меню сбоку от контентной части не «сломав» отображение на мобильных устройствах.

Финальный вид испытания

Задание

  1. Допишите стили в класс .flexible-aside.
  2. Допишите стили в класс .main
  • Ширина бокового меню: 300px. При ширине viewport меньше 1040 пикселей: на всю доступную ширину.
  • Базовая ширина контентной части без учёта отступов: 700px. Блок должен тянуться на всю доступную ширину при любом разрешении viewport

Подсказки

  • Посмотреть финальные результаты на трёх разных разрешениях можно в директории __tests__/__image_snapshots__
  • Перед началом задания обязательно посмотрите на поведение блоков.
Успешных завершений: 74%

Последние код-ревью

Автор Дата обновления Версий
user-0b12b0ab9e8a5a7d 01 июля, 17:45 1
biscuit 29 июня, 09:38 2
aldangold 28 июня, 13:50 1
user-157d14ee7bf1733e 26 июня, 11:37 1
justmary 24 июня, 11:26 1