Comment on page
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
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
}
},
// ...
}
Last modified 11mo ago