Html: Flex adaptivity

CSS: Flexbox fundamentals
Last update: 20 May 09:20
0
Students

This challenge will require a trial-and-error approach.

Sometimes, you can use tricks beyond the obvious to create an adaptive layout. Your task is to adapt this page for large resolutions.

Non-adaptive page

The page consists of two parts:

  • Menu
  • Main content

Right now the menu displays at the top and the content part is below it on all screen resolutions. Your task is to position the menu to the side of the content part without "breaking" the mobile device's display if the viewport width is 1040px or more.

Final view

Task

  1. Add required styles to the .flexible-aside class
  2. Add required styles to the .main class
  • Width of the side menu: 300px. If viewport width is less than 1040 pixels: all available width
  • Basic width of the content part without taking into account the indentation: 700px. The block must stretch to the full available width at any viewport resolution

Tips

  • To see the output for three different resolutions, go to __tests_/_image_snapshots__ directory
  • Be sure to look at the behavior of the blocks before starting the task

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
900
exercises
2000+
hours of theory
3200
tests