# Як адаптувати сторінку в Zero block

Якщо створена сторінка в універсальному блоці добре виглядає на комп’ютері, але сайт не відображатиметься коректно на екрані мобільного телефона або планшета через різний розмір цих пристроїв.

## Ключова інформація

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

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

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

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

Спочатку ми створюємо дизайн для великої версії екрана (комп’ютера)

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

Ось кілька прикладів того, як сторінка має виглядати для кожного розміру:

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

<figure><img src="/files/4077a96fc79c0962c11cfb81b17c52108cec2d26" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3c997d919b9ef5428d80afbf62d93b11f47c0080" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/288c9ed53474bb269109f83f64f28022b846ac64" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/5a3cd0655161fc574c7e4e1ac2a79acca2ed71aa" 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/uk/websites/saiti/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.