Responsive Breakpoints for Themes

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:

Key	Type	Description
`name`	String	The name of the breakpoint. At this time only `"mobile"` is available for use.
`mediaQuery`	String	A media query string for the renderer/editors to use when generating responsive CSS. e.g. `"@media (max-width: 767px)"`
`previewWidth`	Key/Value Pair	To 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 %}

​Define breakpoints in a theme

​Define responsive styles in dnd_area tags

Define breakpoints in a theme

Define responsive styles in dnd_area tags