Breakpoints

Oxygen ships with five breakpoints, and most sites never need another one. When you do
— a very small phone, a wide desktop, a kiosk — you add it here. Open the builder,
click the Oxygen logo in the top-left corner, choose Preferences, then the
Breakpoints tab.

Breakpoints are stored site-wide, so one you add is there for everyone editing the
site. Nothing is applied until you click Save Breakpoints.

The built-in breakpoints

Breakpoint	Applies at	Preview width
Desktop	all widths	100%
Tablet Landscape	1119px and below	1024px
Tablet Portrait	1023px and below	768px
Phone Landscape	767px and below	480px
Phone Portrait	479px and below	400px

Desktop is the base: styles you set there apply everywhere, and each narrower
breakpoint overrides what it inherits. These five can't be edited or removed — this tab
only manages the ones you add.

Add a breakpoint

1. Click Add Breakpoint, give it a name — this is the label you'll see in the
   breakpoint switcher — and click Add.
2. The new breakpoint appears with Click to set min and max widths. Click it to
   open the editor.
3. Fill in Maximum width, Minimum width, or both. Oxygen builds the media query
   from whatever you give it, and shows you the result. One field is enough: a maximum
   alone gives @media (max-width: …), a minimum alone gives @media (min-width: …),
   and both together give a range.
4. Set Default Preview Width — the canvas width the builder switches to when you
   select this breakpoint. Leave it at 100% to fill the canvas, or choose custom and
   enter a width in pixels. Oxygen pre-fills the custom field with your maximum width;
   250px is the smallest it accepts.
5. Click Save to close the editor, then Save Breakpoints.

Your breakpoint is then in the breakpoint switcher at the top of the builder, after the
built-in ones and marked with a star.

Switch to it and style as usual — a custom breakpoint behaves like a built-in one, and
the CSS Oxygen writes for it goes inside the media query shown in the editor.

Editing and deleting

Click a breakpoint's media query to reopen the editor — or use the pencil icon ,
first of the two buttons on the right-hand end of the breakpoint's row. The trash
icon beside it deletes the breakpoint. Both need Save Breakpoints
afterwards.

Deleting is worth pausing over: the styles you set at a breakpoint belong to it, so
removing the breakpoint removes them. Oxygen asks you to confirm, and says so.

Where custom breakpoints don't appear

A few element settings take a breakpoint as their value rather than being set per
breakpoint — "stack below this breakpoint", for instance. Those dropdowns list only the
five built-in breakpoints.

To include your custom ones, turn on Include Custom Breakpoints in Breakpoint
Dropdowns in UI Settings. Limitations apply, and the setting links
to them; some controls also opt out individually and keep showing the built-in list
either way.