> For the complete documentation index, see [llms.txt](https://docs.ngsurvey.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ngsurvey.com/form-management/style-branding/style-editor/mobile-responsive-design.md).

# Mobile / Responsive Design

## 📱  Mobile Devices / Responsive Design

All surveys and forms styles comes out of the box with support for mobile, tablet or desktop clients. The style will automatically be adapted to target device, some questions like the [matrix questions](/form-management/form-designer/questions/question-types/matrix-questions.md) will even adapt their rendering to match mobile devices constraints.&#x20;

The style editor let you preview at any time how your survey will look on the target device of your choice.

![](/files/-MBbz7P4lfVJz7CusAMq)

{% hint style="warning" %}
Be careful when you select a target and edit the [Elements](/form-management/style-branding/style-editor/elements.md) properties as the [Elements](/form-management/style-branding/style-editor/elements.md) properties are saved, as described below, on a per target basis.  If you want that your changes targets all devices make sure to switch back to the **All devices** before making changes to the elements
{% endhint %}

## &#x20;💻 Different styles for different devices.

The default mode when editing a style is that the style targets all devices, as such if you change for example the answers font sizes in the [Elements](/form-management/style-branding/style-editor/elements.md) properties all devices will have the same font size.&#x20;

Yu can however also have more granular approach and create one style for each target device.&#x20;

If you would like to set different style properties based on the target device you may  select the target device for which you want to edit the properties and edit the [Elements](/form-management/style-branding/style-editor/elements.md) properties.&#x20;

![](/files/-MBbwPLP8Qs9nQB0JIbn)

If you have set the smartphone target any changes to the [Elements](/form-management/style-branding/style-editor/elements.md) will now only be shown on smartphones.&#x20;

Styles properties are set at runtime in the survey based on the respondent device browser width. If the user runs for example on a laptop with a screen 960px resolution ngSurvey will first try to look up the style properties of set for the **laptop** target device, if it can't find any property there it will fall back down to the **tablet** and so on. If ngSurvey can't find any target device specific properties it will fall back to the **All device** properties.&#x20;

{% hint style="warning" %}
Specific target devices styles take precedence over the global All devices target style and will override any similar property.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.ngsurvey.com/form-management/style-branding/style-editor/mobile-responsive-design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
