Logo
Logo

Breakpoint Dropdown Limitations

Certain Breakdance elements have Show At and Hide At dropdowns that show the built-in breakpoints. By default, the elements that use these dropdowns support the built-in breakpoints.

In Breakdance, at Preferences > UI Settings, you can toggle the Include Custom Breakpoints in Breakpoint Dropdowns to include your own custom breakpoints in most of these dropdowns.

Breakdance allows you to specify widths that will be used to generate the CSS that will be used as the media query for your custom breakpoint.

As you can specify any combo of widths, Breakdance and 3rd party element developers can’t anticipate every scenario, including but not limited to:

  • Custom breakpoints that overlap each other
  • Custom breakpoints that overlap the built-in breakpoints
  • Custom breakpoints that are not adjacent to each other, i.e. one that applies between 1000px and 800px, and another that applies between 600px and 400px, with no breakpoint for the sizes between the two
  • Use of min-width for some custom breakpoints, max-width for others, and both min-width and max-width on others
  • The ordering of your custom breakpoints

Therefore, there is no guarantee Show At, Hide At, Stack Vertically At or any other functionality in an element included with Breakdance or developed by a 3rd party element developer will work with your specific custom breakpoint configuration.

Additionally, Settings > Hide On Breakpoint will never show custom breakpoints. As your custom breakpoint may not have a min or max width, it would not be possible to hide on that breakpoint only – the element would be hidden on all breakpoints matching your media query. Instead, apply `display: none;` in custom CSS or at Settings > Advanced > Wrapper > Layout to hide at all media queries matching your custom breakpoint.

No support is provided for unexpected behavior related to conflicts between your custom breakpoints and an element’s generated CSS. You are responsible for your generated CSS.