Mobile Formatting

With the Drag-drop and Contentbox editors, you can set mobile-only formatting options via the Style Popup / Properties Inspector.

To apply mobile-only styling

  • Click into the snippet block on your page you would like to change the visibility for, 
  • Then click the RED COG ICON (shown below) that appears on the row tools icons top left of the snippet. This will launch the Style Settings Popup / Properties Inspector.
  • Select / Navigate to the element you want to apply mobile styling to, then click the MOBILE ICON in the set of tabs.

Select / Navigate to the element you want to apply mobile styling to.

In the popup that appears, select the element you would like to change visibility for. By default this is the entire block (ROW), but you can also choose columns or elements within it such as paragraphs and images.

If there are multiple elements of the type you select, e.g. Columns, Images or Text, you can navigate between them using arrow buttons that appear at the top of the modal.

Open a mobile setting section to apply the relevant mobile options

Within the mobile settings you will find sections for Font Size, Text Alignment etc, click to open a section to see the options.

The change will be automatically applied to the element, which will then have a highlight colour and caption to indicate its status e.g. MOBILE ONLY.

Remember to save your changes.

To preview the changes made

By default when editing your website on a mac or PC you will not see the changes as it is not in mobile mode.

You can view the changes on your desktop machine by:

  • Clicking the EDITOR SIZE dropdown top right of the editor and changing to MOBILE
  • PREVIEWING the page/website then reducing the width of the widow to trigger the mobile view.

The second option has the benefit of allowing you to work in the wider editor mode, then refreshing the preview to view any changes quickly.

You can also right-click the preview to bring up and INSPECT ELEMENT option that will allow you to view the website in a mobile mode.

Changing Editor Mode to view changes

Previewing the changes in a new tab, then right-clicking > INSPECT ELEMENT to bring up the sidebar, and Toggling DEVICE ELEMULATION via the button indicated.