# Making your UI responsive

Responsive design allows you to create layouts that adapt to various screen sizes, from mobile phones to large monitors. JSX.Design makes it simple to design responsive UIs directly in the editor with breakpoint-specific customization.

## How to design a responsive canvas in JSX.Design

* The device toolbar is located at the top of the editor. It allows you to choose from:
  * **Auto**
  * **Mobile** (for smaller screen devices)
  * **Tablet** (for medium-sized screens)
  * **Monitors** (for standard desktop monitors)
  * **Large Monitors** (for larger screen sizes)
* Once switched to a breakpoint (e.g., mobile or tablet), any changes made will affect only that screen size. For example, you may want to reduce the padding or resize text when the design is viewed on mobile devices.
* Use the toolbar to easily navigate and customize your design for different screen sizes.

{% hint style="info" %}
Changes done in Auto mode will affect across all breakpoints.
{% endhint %}

***

#### **Next Steps:**

Brilliant! Now let's export your canvas to your React project:


---

# 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://skyslit.gitbook.io/jsx.design/getting-started/making-your-ui-responsive.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.