Данное испытание потребует от вас навыков поиска решения методом проб и ошибок.
Иногда, для создания адаптивной вёрстки можно прибегать к хитростям, не лежащим на поверхности. Ваша задача — адаптировать для больших разрешений представленную страницу.
Страница состоит из двух частей:
- Меню
- Основной контент
Сейчас, на всех разрешениях экрана меню располагается сверху, а под ним находится контентная часть. Ваша задача — при ширине viewport от 1040px расположить меню сбоку от контентной части не «сломав» отображение на мобильных устройствах.
Задание
- Допишите стили в класс .flexible-aside.
- Допишите стили в класс .main
- Ширина бокового меню: 300px. При ширине viewport меньше 1040 пикселей: на всю доступную ширину.
- Базовая ширина контентной части без учёта отступов: 700px. Блок должен тянуться на всю доступную ширину при любом разрешении viewport
Подсказки
- Посмотреть финальные результаты на трёх разных разрешениях можно в директории __tests_/_image_snapshots__
- Перед началом задания обязательно посмотрите на поведение блоков.
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Отзывы
Блин, прикольное задание! Посидел минут 20 в панике и с пустой головой, потом подумал "Окей, контент растягивается, меню растягивается (иногда), значит их flex-grow не может быть равен 0. Но тогда ведь невозможен кейс, чтобы меню было фиксированной ширины! Или......" Дальше всё решилось мгновенно)
Крутое задание) Первое что пришло в голову — это использовать медиа запросы. Но потом сразу понял, что надо с помощью флекса) Моё решение отличается от учительского. Интересно критична разница и правильно ли так решить?) https://ru.hexlet.io/code_reviews/876091
Кажется, я немного считерил)
https://ru.hexlet.io/code_reviews/691072
Но вообще спасибо! Даже меня с 4-х летним оптом удивили такой задачей. Первые минут 10 мозг орал: медиазапросы!!!!
Классное задание! Сначала решил по какому-то наитию, затем стал вдумчиво формализовывать, что происходит и по какому принципу выстраивается макет.
Неожиданный поворот. Когда я попробовал, то, что сработало и тест был зачтен, для меня это, показалось все же неверным и я еще какое-то время пытался себя убедить, что есть другое решение, так как думал, что правильная верстка выглядит иначе и однозначнее ) Но в целом рад, что результат оказалось верным, спасибо )