# Breakpoints

### **Breakpoint Definitions**

<table><thead><tr><th width="100">Key</th><th>Width (px)</th><th>Device Type</th></tr></thead><tbody><tr><td><code>sm</code></td><td><code>576</code></td><td>Mobile</td></tr><tr><td><code>md</code></td><td><code>768</code></td><td>Tablet</td></tr><tr><td><code>lg</code></td><td><code>992</code></td><td>Laptop</td></tr><tr><td><code>xl</code></td><td><code>1200</code></td><td>Desktop/Large screen</td></tr></tbody></table>

{% hint style="info" %}
Breakpoint values are predefined and cannot be customized.
{% endhint %}

### How Breakpoints Work

* The default object defines base styles applied across all screen sizes.
* Each breakpoint (sm, md, lg, xl) can override specific style properties as needed.
* Breakpoints follow a mobile-first approach: smaller screens inherit from default unless explicitly overridden.

#### Example: Responsive DidomiStyle Payload

```json
"style": {
  "default": {
    "backgroundColor": "#ffffff",
    "padding": "12px",
    "borderRadius": "4px",
    "borderWidth": "1px",
    "boxShadow": "0px 2px 6px rgba(0,0,0,0.1)",
    "margin": "8px 0",
    "color": "#000000",
    "fontSize": "14px",
    "lineHeight": "1.5",
    "fontWeight": "400"
  },
  "sm": {
    "fontSize": "14px"
  },
  "md": {
    "fontSize": "16px"
  },
  "lg": {
    "fontSize": "18px"
  },
  "xl": {
    "fontSize": "20px"
  }
}
```

In this example:

* The widget starts with a default layout
* `fontSize` increases progressively at each screen breakpoint

{% hint style="info" %}
See [DidomiStyle](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomistyle) Options for additional breakpoint examples using the API.
{% endhint %}

***

### Best Practices

* Always define a default style as fallback
* Only override what’s necessary at each breakpoint
* Test styles on real devices or using responsive preview tools