Official comment
Edit Mobile Fonts and Backgrounds
The View Mobile Display feature allows you to view the ONTRAmail on a simulated mobile device, and adjust font style (the font family, italic, and bold settings), font sizes and background position specifically for those devices.
The View Mobile Display rendering is accurate for most of the mobile email clients, including iPhone, iPad and Android clients. As of November 2016, 55% of all email was opened on mobile devices, with 33% on iPhone, 13% on iPad and 9% on Android. The three mobile clients we know do not support the feature are Yahoo! Mail App on Android, Universal Outlook App on Windows Phone, and AOL Alto App on both Android and iOS.
Mobile Display Settings Video
Edit Mobile Font Styles
Click the View Mobile Display button. The canvas will scale to 360px wide which is the average size of a small mobile device.
The font styles button will change to Mobile Font Style. Click on the Mobile Font Style drop down to edit the mobile fonts.
Edit the font face by selecting one of the options in the drop down, then adjust the font size, line height and weight (boldness) by using the sliders. You can also enter a desired pixel size manually for the font size and line height values. The choices presented are:
- Any of the listed font families
- Italic or normal
- Font size: 6px to 180px
- Line spacing: 6px to 180px
- Font weight range: This slider increments the CSS font-weight property from 100 to 900 (400 is "normal" and 700 is "bold")
Click the Save button to accept the change.
When you edit font sizes and style in View Mobile Display mode the changes are locked in for the mobile device. Changes to the font style and size will not propagate to the desktop view, and future changes to the font style and size in the desktop view will not change the mobile view.
Note: Only font style, size and Mobile Block Spacing for backgrounds are locked for the mobile display. All other elements, including font colors, background colors or images, text, adding or removing blocks, etc. remains synchronized between the mobile and desktop display.
Background Images in Mobile Block Spacing
Background images in email are cropped, but you can adjust how the background is displayed to a large degree by adjusting the Mobile Block Spacing. Select the block to edit, then use the Mobile Block Spacing drop down to increase or decrease the top and bottom space. The spacing will be locked for the View Mobile Display view, and not affect the desktop view.
Note: The text in blocks is still synchronized between the View Mobile Display and desktop versions of the block so remember to come back to the View Mobile Display view to see if changes to the text require tweaking the Mobile Block Spacing settings.
Page Width
The page width setting for mobile is fixed at "Full" and cannot be changed, regardless of the desktop view page width.
