# Responsive design

The LiSA Library layouts are responsive to the width of the library's host element. Following the mobile-first approach, the layouts are based on a mobile-compatible version of a show item. As a result the minimum width of a show item is 256px with a default spacing of 1rem.

{% hint style="info" %}
In CSS rem stands for root em, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.

According to the W3C spec the definition for one rem unit is:

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
{% endhint %}

### Layout breakpoints

LiSA Library implements the following break-points to adjust the rendered layout.

min-width: 576px min-width: 864px min-width: 1152px min-width: 1440px

{% hint style="warning" %}
Note: Don't confuse these break-points with CSS media query break-points. LiSA Library uses these break-points to adjust its layout to the library's host element — not the browser's viewport. This is due to the fact that — for the majority of impementations — the library's host element does not expand over the entire width of the browsers viewport.
{% endhint %}


---

# 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.hello-lisa.com/developers/widgets/appearance/responsive-design.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.