> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 7e1e6da2-1f2d-4bfb-880d-30f1aa7a1139
---

# Responsive Breakpoints for Themes

> Learn about creating responsive breakpoints in your themes configuration settings.

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](/cms/reference/hubl/tags/dnd-areas) 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 theme={null}
// 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](/cms/reference/hubl/tags/dnd-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](/cms/reference/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-):

```hubl theme={null}
{% 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.

```hubl theme={null}
{% dnd_section padding={
    'default': { 'top': 100, 'bottom': 100 },
    'mobile': { 'top': 20, 'bottom': 20 }
  }
%}
{% end_dnd_section %}
```