Responsive Design

Design your page once at Desktop, then walk down the breakpoints and fix only what
breaks. Every style in Oxygen belongs to the breakpoint you set it at, so a narrower
screen inherits everything you've already done and you only override the handful of
values that need it — a heading that's too big on a phone, a three-column row that should
stack. It's the same controls you already use; the only new idea is which breakpoint
you're editing at.

Switch breakpoints in the toolbar

The Breakpoint control in the builder's toolbar shows which breakpoint you're editing
at — Desktop when you open a page. Click it and pick another, and the canvas resizes
to that breakpoint's preview width so you're looking at roughly what a visitor on that
device sees.

Two shortcuts make this faster:

• Ctrl+Alt+R cycles to the next breakpoint, so you can walk the whole set without
  reaching for the menu.
• Ctrl+Shift+S toggles between a canvas scaled to fit your screen and one at actual
  size.

Desktop is the base; narrower breakpoints override it

Oxygen ships five breakpoints, and they cascade downwards:

Values you set at Desktop apply at every width. Each narrower breakpoint is a max-width
media query, so a value set at Tablet Landscape applies at 1119px and below — flowing down
through Tablet Portrait, Phone Landscape and Phone Portrait until one of them overrides
it. In the stylesheet that's nothing exotic:

.demo-heading{font-size:34px}
@media (max-width:1023px){.demo-heading{font-size:28px}}

That's why the normal way to work is top-down: build at Desktop, switch to Tablet
Landscape and fix what the narrower canvas broke, then Tablet Portrait, and so on. Each
step inherits the one above it, so most breakpoints need only a few values.

Adding your own breakpoints, and what they do to the preview width, is covered in
Breakpoints.

Every style you change lands on the current breakpoint

Change a value while Tablet Portrait is selected and it's written at Tablet Portrait — it
applies there and narrower, and leaves Desktop alone. Nothing else about styling changes:
the value still goes to the active class, so it reaches every element using that class
at that width, not just the one you have selected.

That combination is what makes responsive work quick: one override on a class fixes every
card on the site at that width.

Read the labels to see where a value came from

This is the part that turns responsive debugging from guesswork into reading. Control
labels are colour-coded:

• Purple — set on the active class, at the breakpoint you're editing.
• Amber — inherited, either from another class on the element or from a larger
  breakpoint. The inherited value shows greyed-out inside the control.
• Red — set here, but overwritten by a later class or by a smaller breakpoint.
• Blue — bound to a variable.

Hover an amber or red label and the tooltip names the exact source — which breakpoint or
which class the value is coming from.

So "why is this still 34px on a phone?" is answered by the label: amber means you're
looking at a value inherited from a wider breakpoint, and setting it here overrides it.

Showing and hiding elements at a width

Display is a style like any other, so it takes a value per breakpoint. To drop an element
on phones, switch to that breakpoint and set its display to none; to show something only
on small screens, hide it at Desktop and show it again lower down.

That's a different mechanism from
display conditions, which
decide whether an element renders at all based on the content or the visitor. Conditions
keep it out of the page entirely; a responsive display value ships the markup and hides it
at that width.

Check it before you call it done

The canvas at a breakpoint's preview width is a good approximation, not the real thing.
Alt+P toggles preview mode, which drops the builder chrome so you can see the page on
its own, and Ctrl+Shift+S switches between scale-to-fit and actual size. When the page
matters, open it on the front end and resize the window — that's the only view with no
builder involved at all.

Tips

Troubleshooting