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:

RangeStarts fromWidthHeightHidden?

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 updated