> 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/fr/widgets/editeur-de-widget/configurer-les-points-de-rupture-du-widget.md).

# Configurer les points de rupture du widget

{% hint style="success" %}
**Type d'accès**: Widgets - Éditeur
{% endhint %}

Un point de rupture responsive est une largeur d'écran spécifique où la mise en page du widget changera afin de mieux s'adapter à l'appareil sur lequel il est affiché. Dans cet article, nous expliquerons comment modifier un widget existant afin que sa mise en page s'ajuste en fonction de la taille de l'écran.

Cliquez **Widgets** dans le panneau de gauche et sélectionnez l' **Modifier** icône en ligne avec le nom d'un widget.

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

Accédez à la barre d'outils d'aperçu du widget pour sélectionner le [appareil](/fr/widgets/editeur-de-widget/apercu-du-widget.md#device-preview) pour lequel vous ajustez la mise en page du widget. Le point de rupture pour chaque taille d'écran est hérité de la [prévisualisation de la marque](/fr/widgets/editeur-de-widget/apercu-du-widget.md#brand-preview) dans l'éditeur de widget.

{% hint style="warning" %}
**Remarque**: Bien que cette étape ne soit pas requise pour configurer correctement un point de rupture de widget, elle permettra à votre organisation de visualiser comment votre configuration affecte le design de votre widget pour cette taille d'écran.&#x20;
{% endhint %}

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

Sélectionnez un composant dans la fenêtre d'aperçu du widget. Une fois le composant sélectionné, accédez au panneau de droite et cliquez sur l'onglet **Style** .&#x20;

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

Utilisez le **Points de rupture** menu déroulant pour sélectionner un point de rupture spécifique que vous souhaitez configurer.&#x20;

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

Avec le point de rupture sélectionné, développez l'accordéon **Global** et utilisez les champs fournis pour modifier le style du widget pour le point de rupture.

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

Répétez autant que nécessaire pour d'autres composants dans chaque couche du 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/fr/widgets/editeur-de-widget/configurer-les-points-de-rupture-du-widget.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.