> For the complete documentation index, see [llms.txt](https://docs.didomi.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.didomi.io/widgets/widget-editor/configure-widget-breakpoints.md).

# Configure widget breakpoints

{% hint style="success" %}
**Access Type**: Widgets - Editor
{% endhint %}

A responsive breakpoint is a specific screen width where the widget's layout will change in order to better fit the device on which it is viewed. In this article, we will cover how to edit an existing widget so that its layout adjusts per screen size.

Click **Widgets** on the left-hand panel and select the **Edit** icon inline with a widget name.

<figure><img src="/files/5v8XgXQ3a2Lajez6F8DG" alt="" width="563"><figcaption></figcaption></figure>

Navigate to the widget preview toolbar to select the [device](/widgets/widget-editor/widget-preview.md#device-preview) for which you are adjusting the layout of the widget. The breakpoint for each screen size is inherited from the current [brand preview](/widgets/widget-editor/widget-preview.md#brand-preview) in the widget editor.

{% hint style="warning" %}
**Note**: While this step is not required to successfully configure a widget breakpoint, it will enable your organization to visualize how your configuration is affecting the design of your widget for that screen size.&#x20;
{% endhint %}

<figure><img src="/files/Downm809DoTKX7gTIvE0" alt="" width="563"><figcaption></figcaption></figure>

Select a component from the widget preview window. With the component highlighted, navigate to the right-hand panel and click the **Style** tab.&#x20;

<figure><img src="/files/AoESCtuy2W2gfrYO2SJc" alt="" width="563"><figcaption></figcaption></figure>

Use the **Breakpoints** drop-down menu to select a specific breakpoint that you wish you configure.&#x20;

<figure><img src="/files/A1jT6Mdm5pFH3i7Epoh5" alt="" width="337"><figcaption></figcaption></figure>

With the breakpoint select, expand the **Global** accordion and use the provided fields to edit the styling of the widget for the breakpoint.

<figure><img src="/files/GX92mb6FlP2kCrXsE0KE" alt="" width="328"><figcaption></figcaption></figure>

Repeat as necessary for other components in each layer of the widget.


---

# 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.didomi.io/widgets/widget-editor/configure-widget-breakpoints.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.