Devices and breakpoints
Learn how to customise breakpoints in Shopstory
Shopstory uses 6 resolution ranges:
xs
- phones in a vertical modesm
- horizontal phones, small vertical tabletsmd
- vertical tablets, sometimes horizontal phoneslg
- small desktops, tablets in horizontal modexl
- desktops (mostly laptop)2xl
- large desktops
Each of them is represented by 4 properties:
startsFrom
- minimum resolutionw
- width of device representing the range in Shopstory Editorh
- height of device representing the range in Shopstory Editorhidden
- info whether we should show this resolution in Shopstory Editor
Defaults:
Range | Starts from | Width | Height | Hidden? |
---|---|---|---|---|
xs | 0 | 375 | 667 | |
sm | 568 | 667 | 375 | yes |
md | 768 | 768 | 1024 | |
lg | 992 | 1024 | 768 | yes |
xl | 1280 | 1366 | 768 | |
2xl | 1600 | 1920 | 920 |
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
Last updated