Setting a different value per device

Most settings can hold one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

Your page is read on a phone held in one hand and on a widescreen monitor, and the same number rarely looks right on both. A 60 pixel gap that frames a heading nicely on desktop swallows half a phone screen.

So most settings in the Modify drawer can be filled in twice over: once as a single value that applies everywhere, or as three separate values — one for phones, one for tablets, one for desktops. You choose which mode you want with the "Same value for all resolutions" checkbox at the top of the setting.

When the box is checked you fill in one value and every visitor sees it. When you uncheck it, the single value is cleared and three inputs appear instead. Fill in only the ones you care about; a device size you leave empty simply inherits whatever the browser or the surrounding page would have done anyway.

When you would use it

  • Text is comfortable on desktop but feels cramped on a phone.
  • A generous outer margin makes sense on wide screens but wastes space on small ones.
  • You want a decorative element to disappear entirely on phones — see Hide Column.

How to change it

  1. Open the setting you want to change in the Modify drawer.
  2. Leave "Same value for all resolutions" checked to use one value everywhere, and type it in the single input.
  3. Uncheck it when you want per-device control. Three inputs appear, labelled for phone, tablet, and desktop.
  4. Fill in the device sizes you want to control and leave the rest blank.
  5. Use the device size buttons above the canvas to preview each width before you publish.

Watch out for

  • Switching the checkbox back on clears the three per-device values, and switching it off clears the single value. That is deliberate — only one of the two modes can be in effect — but it does mean you lose the numbers you had typed.
  • A blank input is not the same as zero. Blank means "do not set this at all"; zero means "set it to nothing", which can remove spacing that the browser would otherwise have given you.
  • The composer canvas always shows one width at a time. Something that looks fine while editing can still overflow on a narrower device, so preview before publishing.

Related settings

Where to go next