In Oxygen, you can create Custom Breakpoints in the event you need something beyond the default Breakpoints.

Create a Custom Breakpoint

1. Go to Oxygen Menu > Preferences in Oxygen’s builder.
2. Select the Breakpoints tab.
3. Click Add Breakpoint.
4. Add a name for the custom breakpoint and click the + Add button.
5. Click the Edit Icon next to the newly created breakpoint.
6. Set the Maximum width and/or Minimum width in pixels for one or both of the widths.
7. Set the Default Preview Width to match the widths.
8. Save changes.

Custom Breakpoint Limitations

Certain Oxygen elements and controls 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 Oxygen, you can toggle the Include Custom Breakpoints in Breakpoint Dropdowns to include your own custom breakpoints in most of these dropdowns. This is done in Oxygen by going to Oxygen Menu > Preferences > UI Settings.

Oxygen 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, Oxygen 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 Oxygen 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.