# Как адаптировать страницу в нулевом блоке

Если созданная страница в универсальном блоке хорошо выглядит на компьютере, но на экране мобильного телефона или планшета сайт будет отображаться некорректно, потому что размер этих устройств отличается.

## Основная информация

В универсальном блоке нужно настроить адаптацию для планшета и телефона в горизонтальном и вертикальном положениях.

* Для компьютера размер блока составляет 1200px.
* Планшет в горизонтальном положении — 960px
* Планшет в вертикальном положении — 640px
* Телефон в горизонтальном положении — 480px
* Телефон в вертикальном положении — 320px

В блоке для этого есть инструмент, который при переключении автоматически показывает размер страницы, в которую должны помещаться все созданные элементы сайта: текст, фигуры, кнопки, видео и т. д.

<figure><img src="/files/6946c2430a1aa943fe1b0467fb2092905b9ada71" alt=""><figcaption></figcaption></figure>

Сначала мы создаём дизайн для большой версии экрана (компьютер)

После этого мы начинаем адаптировать созданную страницу сначала для планшета в горизонтальном положении и так далее. Для этого мы используем панель инструментов в блоке, подбирая размеры текстов и элементов так, чтобы они не выходили за пределы блока, иначе они не будут видны на устройствах пользователей сайта.&#x20;

Вот несколько примеров того, как должна выглядеть страница для каждого размера:

Планшет в горизонтальном положении 960px

<figure><img src="/files/2faf4c3324c3c827b73cb163704927a103289e46" alt=""><figcaption></figcaption></figure>

Планшет в вертикальном положении 640px

<figure><img src="/files/035fc4d8b03205509e90e4d711108a88b668cb2b" alt=""><figcaption></figcaption></figure>

Телефон в горизонтальном положении 480px

<figure><img src="/files/a9868a3138b493e7be0b41c783404e9b591cdd53" alt=""><figcaption></figcaption></figure>

Телефон в вертикальном положении 320px

<figure><img src="/files/4641aa425e17e20fc6f01626d9d392e36ba598d0" alt=""><figcaption></figcaption></figure>

Все основные блоки в конструкторе сайтов автоматически адаптируются под нужный размер экрана. О базовых блоках читайте в следующих статьях.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/ru/websites/saity/blocks/zero/settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.