Skip to main content

Device-specific changes

Websites often use different layouts on desktop, tablet, and mobile. The Visual Editor lets you create a change for every device and then add overrides for individual device types where needed.

All devices and current device​

After selecting an element, the Apply to control offers two scopes:

  • All devices applies new edits to desktop, tablet, and mobile. Use this for the default version of the element.
  • Current (Desktop), Current (Tablet), or Current (Mobile) applies new edits only to the device type currently selected in the toolbar.

The current device name changes when you switch between the desktop, tablet, and mobile views. A blue dot beside a scope indicates that the selected element already has changes in that scope.

important

Changing the device view only changes the preview and current device context. It does not make an edit device-specific by itself. Select Current (device) under Apply to before making the edit.

Create a device-specific change​

  1. In the editor toolbar, select the Desktop, Tablet, or Mobile view.
  2. Select the element you want to change.
  3. Under Apply to, select Current (device).
  4. Make the visual, AI-assisted, or element-code change.
  5. Review the result, switch to the other device views to compare them, and save the variation.

For example, you could set a large heading size under All devices, switch to the mobile view, select Current (Mobile), and set a smaller heading size. Desktop and tablet continue to use the all-device size, while mobile uses its override.

You can also switch views with Shift+D for desktop, Shift+T for tablet, and Shift+M for mobile.

How overrides work​

All-device and device-specific changes can exist on the same element at the same time:

  • An all-device change acts as the default.
  • A device-specific change takes precedence for its device when it changes the same setting.
  • Settings that are not overridden continue to inherit the all-device change.
  • Removing a device-specific override reveals the all-device value again.

When you select Current (device), the editor may display values inherited from All devices. Editing one of those values creates an override for the current device; it does not replace the all-device change.

To edit the shared default later, switch Apply to back to All devices. The blue scope indicators help you see whether the selected element has all-device changes, current-device changes, or both. The History panel also labels changes with their device scope.

tip

Check all three device views after adding an override. A device-specific change can affect layout, spacing, or moved elements differently from the shared version.

Device changes versus Audience targeting​

A device-specific change controls where that individual edit is applied; it does not exclude visitors from the experiment. If the entire experiment should run only on certain device types, add a Device condition to the Audience.