Set responsive breakpoints for themes

Last updated:

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.

JSON 
// 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:

Use this table to describe parameters / fields
KeyTypeDescription
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 %}
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.