Mobile Formatting

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

There are also Contentbox section and Image specific options available.

To apply mobile-only styling - Snippet Block

  • 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 / Style Editor.
  • 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 EMULATION via the button indicated.

To apply mobile-only styling to a Contentbox Section

  • Click into the section on your contentbox page you would like to change the mobile settings for, 
  • Then click the BLUE COG ICON (shown below) that appears on the contentbox tools icons top left of the snippet. This will launch the Contentbox Inspector.
  • Open the mobile settings area and change the required setting.

Applying mobile-only styling to an image

If you have used the Drag-drop or Contentbox image crop options, you can further tweak the image properties on mobile, using the MOBILE IMAGE HEIGHT option.

  • Hover over the image and click the ORANGE CROP ICON
  •  Ensure your image is set to any option other than AS IS
  • From the popup that appears, set your mobile image height