# Devices and breakpoints

Shopstory uses 6 resolution ranges:

* `xs` - phones in a vertical mode 
* `sm` - horizontal  phones, small vertical tablets
* `md` - vertical tablets, sometimes horizontal phones
* `lg` - small desktops, tablets in horizontal mode
* `xl` - desktops (mostly laptop)
* `2xl` - large desktops

Each of them is represented by 4 properties:

* `startsFrom` - minimum resolution
* `w` - width of device representing the range in Shopstory Editor
* `h` - height of device representing the range in Shopstory Editor
* `hidden` - info whether we should show this resolution in Shopstory Editor

Defaults:

<table><thead><tr><th width="115">Range</th><th width="194">Starts from</th><th width="152">Width</th><th>Height</th><th>Hidden?</th></tr></thead><tbody><tr><td>xs</td><td>0</td><td>375</td><td>667</td><td></td></tr><tr><td>sm</td><td>568</td><td>667</td><td>375</td><td>yes</td></tr><tr><td>md</td><td>768</td><td>768</td><td>1024</td><td></td></tr><tr><td>lg</td><td>992</td><td>1024</td><td>768</td><td>yes</td></tr><tr><td>xl</td><td>1280</td><td>1366</td><td>768</td><td></td></tr><tr><td>2xl</td><td>1600</td><td>1920</td><td>920</td><td></td></tr></tbody></table>

We hide `sm` and `lg` because too many breakpoints cause cognitive overload for editors. Usually mobile, vertical tablet and small desktop are enough to cover all resolutions in a correct way.

If you want to override specific breakpoints values, just use `devices` property in `shopstory/config.ts`

```typescript
const shopstoryConfig : Config = {
    devices: {
        xs: {
            w: 428, // Let's modify xs width and height to iPhone 13 Pro Max
            h: 926
        },
        lg: {
            hidden: false // Let's not hide horizontal tablets
        },
        xl: {
            startsFrom: 1200 // Let's move breakpoint of xl range to 1200
        }
    },
    // ...
}
```