HTML: Flex adaptivity

Last update: 25 Jul 00:02

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


  1. Add required styles to the .flexible-aside class
  2. Add required styles to the .main class
  • Width of the side menu: 300px, but if the viewport width is less than 1040 pixels it should occupy 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


  • 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
hours of theory