Shopstory
Search
⌃K

Devices and breakpoints

Learn how to customise breakpoints in Shopstory
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:
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
}
},
// ...
}