# Breakpoints

The responsive breakpoint system in Elements allows you to change component properties at different user defined breakpoints (i.e. Mobile, Table, Desktop, etc).

On the first “mobile” screen size you won't see any small dots by the controls in the Inspector. As you move up to the next size (SM) you'll see grey dots beside the controls in the Component inspector. If you click on a grey dot (to turn it blue) you can override the setting for that control. Once you add a blue dot you will have that setting for everything above. It’s always left to right. Watch the video below to see how this works in practice.

{% hint style="success" %}
Breakpoints for a project be defined in the [Screens](/elements-docs/elements/theme-studio/screens.md) area of the [Theme Studio](/elements-docs/elements/theme-studio.md).
{% endhint %}

{% embed url="<https://youtu.be/gnlaK4LrhRY>" %}


---

# 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.realmacsoftware.com/elements-docs/elements/responsive-breakpoints.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.
