How to adapt a page in the Zero block

In this article, we will tell you how and why to adapt a page created in a universal block.

If the created page in the universal block looks good on a computer, but the site will not display correctly on the screen of a mobile phone or tablet because the size of these devices is different.

Key information

In the universal block, you need to set up adaptations for the tablet and phone in horizontal and vertical positions.

For a computer, the block size is 1200px.
Tablet in horizontal position is 960px
The tablet is in an upright position is 640px
The phone is in a horizontal position is 480px
Phone in vertical position is 320px

There is a tool in the block for this, which, when switched, automatically shows the size of the page in which all the created elements of the site should fit: text, shapes, buttons, videos, etc.

At first, we create a design for a large version of the screen (computer)

After that, we begin to adapt the created page, first for the tablet in a horizontal position, and so on. To do this, we use the toolbar in the block, adjusting the sizes of texts and elements so that they do not go beyond the block, otherwise they will not be visible on the devices of users of the site.

Here are some examples of how the page should look for each size.:

Tablet in horizontal position 960px