Responsive Breakpoints for Themes

Last updated:

Defining breakpoints in your theme

You can define a set of breakpoint in your theme by adding the responsive_breakpoints object to your themes.json file. Inside of this object are 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
      }
    }
  ]
}

Please see the table below for details about these key/value pairs. 

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}

Defining responsive styles in dnd_area tags with HubL

You are still able to continue using the existing documented styling when using elements inside of the dnd_area tags. In addition to this, you can also define responsive styles for these attributes. Take the following example of a dnd_section.

HubL 
{% dnd_section padding={ 'top': 100, 'bottom': 100 } %}
{% end_dnd_section %}

To simply change the padding for our "mobile" breakpoint, we can simply include values for both our "default" (in this example would be considered you desktop view) and "mobile" breakpoints as illustrated below.

HubL 
{% dnd_section padding={ 
    'default': { 'top': 100, 'bottom': 100 },
    'mobile': { 'top': 20, 'bottom': 20 }
  } 
%}
{% end_dnd_section %}

This functionality currently works in the dnd_section, dnd_row, and dnd_column tags.

Modules

Currently for modules you can set the mobile options through the content editor. Setting the default responsive values for modules at the template level is not yet supported. This functionality is coming soon. This page will be updated to show how at that time.

Was this page helpful? *
This form is for feedback on our developer docs. If you have feedback on the HubSpot product, please share it in our Idea Forum instead.