# Responsive Design

Responsive design is an approach that makes your Zingy app adapt and respond to different devices and screen sizes. The goal is to provide an optimal user experience regardless of whether the user is accessing the Zingy app on a desktop computer, laptop, tablet, or smartphone.

The page editor allows you design your pages responsively in the following ways:

## Page Element Settings: Design Tab

The [Design Tab](/app-editor/page-editor/page-element-settings.md#design-tab) in the [Page Elements Settings](/app-editor/page-editor/page-element-settings.md) screen contains 4 sub-tabs:

* <img src="/files/sJ0pjFVwSnPlOZwty32I" alt="" data-size="line"> Main design settings for the element

  Use the settings in the main sub-tab for changing the overall look of the element across all screen sizes i.e. these design settings become the default for this element, unless the same setting is modified in the Desktop/Tablet/Mobile sub-tabs. **If you only want a design setting to be effective for a specific screen size then leave that setting unchanged in the Main tab.**
* <img src="/files/sXvUZ2IXDurqyPohDTYY" alt="" data-size="line">: Desktop/Laptop view design settings for the element

  Use the settings in the desktop sub-tab for changing the look of the element when viewed on a larger screen like a desktop or laptop computer. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present).
* <img src="/files/KmIENm3u4s3mANe5SIZH" alt="" data-size="line">: iPad/Tablet view design settings for the element

  Use the settings in the tablet sub-tab for changing the look of the element when viewed on an iPad or other tablet like devices. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present).
* <img src="/files/J82pZofWHfeBKdjvIgZh" alt="" data-size="line">Mobile phone view design settings for the element

  Use the settings in the mobile sub-tab for changing the look of the element when viewed on a mobile phone or similar smaller screen device. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present).

{% hint style="info" %}
The setting from the main sub-tab (if present) will be inherited unless overridden.
{% endhint %}

{% hint style="warning" %}
NOTE: Unlike the options tab described below, the smaller screen size setting does not get inherited by the larger screen sizes.&#x20;

**Each screen size needs to be set separately or it inherits the main sub-tab setting.**
{% endhint %}

***

## Page Element Settings: Options Tab

Many built-in elements allow changing certain design settings via the [Options Tab](/app-editor/page-editor/page-element-settings.md#options-tab) in the [Page Elements Settings](/app-editor/page-editor/page-element-settings.md) screen. Some examples of such elements include [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area.md), [Layout Row](/app-editor/page-editor/built-in-elements/layout-row.md), and others.

These settings are organized similar to the [design tab of the page element settings](#page-element-settings-design-tab) described above allowing a Main, Desktop, Tablet and Mobile version for that setting.

{% hint style="info" %}
The main version of the setting (if present) will be inherited for all screen sizes unless overridden.&#x20;
{% endhint %}

{% hint style="warning" %}
NOTE: **If not overridden for a specific screen size**, a smaller screen size setting (if present)  **will be inherited**. e.g. If you choose a specific value for Mobile, then this value will apply to Tablet and Desktop.&#x20;

**This behavior is different from the design tab described above.**
{% endhint %}

***

## Page Content Toolbar

The [page content toolbar](/app-editor/page-editor/page-editor-tour.md#page-content-toolbar) in the [page editor](/app-editor/page-editor/page-editor-tour.md) offers buttons <img src="/files/hLWF2CQZIAIsWr4VXfgR" alt="" data-size="line"> to switch between desktop, tablet and mobile views while designing your page.

{% hint style="info" %}
For information about creating visually appealing and well-structured layouts also  read [Padding and Margin](/app-editor/page-editor/padding-and-margin.md) .
{% endhint %}


---

# 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.zingy.ai/app-editor/page-editor/responsive-design.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.