Адаптивность на Flex Испытание курса: CSS: Flex

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

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

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

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

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

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

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

Задание

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

Подсказки

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

Для полного доступа к испытанию нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

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

Автор Дата обновления Версий
yavictor 20 янв., 12:17 1
sergeysinoptik 20 янв., 11:27 1
andb9 18 янв., 08:38 1
hexlet_art 09 янв., 13:21 1
holiqen 08 янв., 11:16 1