Данное испытание потребует от вас навыков поиска решения методом проб и ошибок.
Иногда, для создания адаптивной вёрстки можно прибегать к хитростям, не лежащим на поверхности. Ваша задача — адаптировать для больших разрешений представленную страницу.
Страница состоит из двух частей:
- Меню
- Основной контент
Сейчас, на всех разрешениях экрана меню располагается сверху, а под ним находится контентная часть. Ваша задача — при ширине viewport от 1040px расположить меню сбоку от контентной части не «сломав» отображение на мобильных устройствах.
Задание
- Допишите стили в класс .flexible-aside.
- Допишите стили в класс .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 |