Even though Shopify has given the free responsive Debut theme and contains some cool features, if you are a seasoned developer, you immediately run into a road blocks. By default, Shopify Debut 2.1.0 (If you don’t know the theme version, here are the steps to find Shopify theme version) theme grid system breakpoints supports only 3 breakpoints.
- Small (< 750 px) (class name starts with “small–“)
- Medium Up (>= 750px ) (class name starts with “medium-up–“)
- Everything else (class name does not have prefix)
Even though, Shopify Debut theme can supports Small (<750px), Medium (>=750px and < 990px), Large (>= 990px and <1400px) and Widescreen (>=1400px) breakpoints, you need to make a change in theme.scss.liquid in order to use it.
Leave a Reply