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.tsconst 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 5mo ago