Register to get access to free programming courses with interactive exercises

Flexible elements CSS: Site Adaptability

In the first project, we created a page with a fixed width of 1000 pixels. This approach is all well and good, but what happens if such a layout is opened on a device whose resolution is less than 1000 pixels wide? In this case, there'll be a horizontal scrolling, which annoys users. No one wants to constantly move content to read a line or see a sidebar. Besides the obvious inconvenience, the user may simply not notice that horizontal scrolling is needed. They might miss an important piece of content.

Create three blocks, each with a width of 300 pixels, and add them to a container with a width of 1000 pixels. Let's see how the browser behaves when displaying such a block on a large and small screen resolution.

One solution to this problem was to use percentage width values instead of pixels. More specifically, the use of relative units of measurement instead of absolute ones. With this approach, blocks will always depend on the current screen resolution of the device. This approach is known as «fluid layout».

What can be done with this layout? First, you need to remove the width of the container, which is currently 1000 pixels. Inside this container, we need to arrange the three elements so that they fill all the available space. Well divide 100% by 3, so the size of one element will be approximately 33%. Leave some space for indentation and take a width of 30%. After this small change, we get the following picture:

As you can see, the blocks are now stretched and squeezed depending on the resolution of the screen. This feature is also used when creating an adaptive site.

In addition to the obvious advantages, this concept has some disadvantages. What happens if the screen resolution is very low? Then our blocks will continue to shrink as long as they can find free space. Then the text inside the blocks can no longer fit and goes beyond the boundaries of its parent. Devices with such small resolutions are hard to find, but the principle that blocks will be compressed to high heaven must always be kept in mind when using relative units.

Fluid layout at an extremely low screen resolution

To solve this situation, we need to use the min-width style. With its help, we can set a stopping point, after which the container and the elements inside it will stop shrinking.

The same approach is used to limit content stretching at large widths. Most often, sites need around 1200-1300 pixels of width for users to be able to comfortably read text. At higher resolutions, the content is stretched too much, and it becomes very difficult to perceive long lines. The stopping point in this case is set using the max-width rule, which specifies a value in absolute units such as pixels.

Additional materials

Additional assignment

Create a page on your computer with two blocks: a sidebar and a main content block. Using relative units and the max-width min-width properties, make a fluid layout. Using the mobile view emulation in your browser, look at the behavior of the layout.

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course 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

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.