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

• min-width
• max-width

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.

---

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

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“