Responsive Breakpoints for Themes
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.
// 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.
| Key | Type | Description |
|---|---|---|
name
| String | The name of the breakpoint. At this time only |
mediaQuery
| String | A media query string for the renderer/editors to use when generating responsive CSS. e.g. |
previewWidth
| Key/Value Pair | To give clues to the editor as to what size we should show our preview iframe at. e.g. |
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.
{% 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.
{% 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.