Device-Specific Edits

By default, most edits that you make to one device will be made on the others, but you can choose to edit most items by device (excluding the header and footer).

Device View

In order to make an edit to a specific device, switch the layout view by selecting from the options in the top bar. This will allow you to make changes to specific widgets on those devices.

General Changes

In order to create device-specific elements:

  1. Copy and paste the element you want on a specific device; this will give two identical versions of the same element.
  2. Right click on one of the versions, click “Hide On Device,” and select a layout where you want an independent version of the element. Click to hide on that layout (e.g. hide on desktop).
  3. Then click on the other copy, click “Hide On Device,” and select the other layouts where you want independent versions of the element.
    • If you want identical elements for the tablet and mobile layouts, select to hide on tablet and mobile. This will give you two different views of the same element (desktop and tablet/mobile).
    • If you want independent element for all three layouts – desktop, tablet, and mobile – copy the element again (so you have three copies total) and choose to hide different versions of the element on each different layout.

The above steps give two or three identical elements that will each display separately on each layout (as defined) so any changes made will only affect the specific layout.

Logo Changes

Your logo or title can be customized; when editing in tablet or mobile, click on the element and use the “Apply to all devices” toggle to enable/disable.

Desktop and Tablet-Specific Changes (Won’t Affect Mobile)

Some edits can be made that DO NOT affect mobile:

  • Width
  • Height
  • Positioning
  • Spacing (aka margins and padding)
  • Background (site and page)
  • Font size (edits will not affect text that has been previously edited in mobile)

There are other changes that won’t affect mobile; you can check this by clicking the element and looking for “Change affects desktop and tablet” under the content and design settings.

Note: for all other edits and if this is not stated, the edit will affect all devices. 

Widget Changes

Some widgets work across all devices, but there are others that offer different options between devices. These include:

  • Background Images: The aspect ratio varies greatly between devices so while certain images may look perfect on a desktop, this may not translate to a smaller device. You can use the Global Design Settings to set a different page background on each device. You can also read our Image Size Guide for more information.
  • Image Slider: Similar to background images, image sliders may not look the same between devices. Ensure you check the slider on all layouts before publishing.
  • Images and Icons: Images and icons aren’t automatically adjusted to fit all devices. Ensure you check these elements on all layouts before publishing.
  • Hover Effects: Tablet and mobile layouts don’t use hover effects so any changes to these are only applied to the desktop layout.
  • Map: The Map widget contains multiple device-specific features.
  • vCita Scheduling: The Scheduling widget contains multiple device-specific features.

Note: ensure you check all widgets, elements, and features on all layouts before publishing.