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