Shopify Debut theme grid system breakpoints

By | February 22, 2018

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.

  1. Small (< 750 px) (class name starts with “small–“)
  2. Medium Up (>= 750px ) (class name starts with “medium-up–“)
  3. 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.

Vishal Monpara is a full stack Solution Developer/Architect with 13 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1’s and 0’s from geographically dispersed hard disks to geographically dispersed user leveraging geographically dispersed team members.

Leave a Reply

Your email address will not be published. Required fields are marked *