Skip to main content
Last modified: August 22, 2025
While developing a theme, you can define responsive breakpoints to optimize styling for mobile and desktop. Below, learn more about how to set breakpoints and define responsive styles in dnd_area tags using HubL. You can use these breakpoints to define the following styling for specific asset types:
  • dnd_section, dnd_column, and dnd_row support margin and padding across breakpoints.
  • Default modules in a dnd_area support margin, padding, and visibility.
  • Default modules outside a dnd_area support only margin and padding.
  • Custom modules in a dnd_area support visibility.
  • Custom modules outside a dnd_area don’t support breakpoint based customizations.
In addition, only two breakpoints are possible at this time: mobile and default (optional for desktop).

​
Define breakpoints in a theme

You can define a set of breakpoints in your theme by adding the responsive_breakpoints object to your themes.json file. Inside of this object is a set of key/value pairs that will contain information about your breakpoint. 
// themes.json
{
  "label": "My Theme",
  "preview_path": "./path/to/preview.html",
  "screenshot_path": "./images/template-previews/home.png",
  "responsive_breakpoints": [
    {
      "name": "mobile",
      "mediaQuery": "@media (max-width: 767px)",
      "previewWidth": {
        "value": 520
      }
    }
  ]
}
Below are the properties you can include within responsive_breakpoints:
KeyTypeDescription
nameStringThe name of the breakpoint. At this time only "mobile" is available for use.
mediaQueryStringA media query string for the renderer/editors to use when generating responsive CSS. e.g. "@media (max-width: 767px)"
previewWidthKey/Value PairTo give clues to the editor as to what size we should show our preview iframe at.e.g. {"value": 520}

​
Define responsive styles in dnd_area tags

While building drag and drop areas, you can including responsive styling using HubL. This functionality currently works in the dnd_section, dnd_row, and dnd_column tags. Take the following example of a dnd_section: 
{% dnd_section padding={ 'top': 100, 'bottom': 100 } %}
{% end_dnd_section %}
To change the padding for the mobile breakpoint, you can include values for both the default (desktop view) and mobile breakpoints as illustrated below. 
{% dnd_section padding={
    'default': { 'top': 100, 'bottom': 100 },
    'mobile': { 'top': 20, 'bottom': 20 }
  }
%}
{% end_dnd_section %}