How do I control the mobile version of my email in more detail? (Modern Editor)

All emails built in Modern Editor will naturally transform to one-column on mobile devices. There’s not much more you need to do to make your email look great for mobile. But, there might be some parts of the email you would like to fine-tune a bit more just for the mobile display.


When mobile styles need to be finessed, use the ‘Mobile’ toggle in any Styles section to refine those styles even further than what you've already set up across the email at a global level. When mobile is toggled you’ll see a phone icon in the Styles and the email preview will slide over to the mobile view.

 

WF_ME_stylesheet_generalstyles_mobiletoggle_iconhighlighted.PNG

 

Quick Tip: It's easiest to first go through and set up all your styles with the Global tab selected. You'll know it's selected when you see the globe icon next to your styles.

 

WF_ME_stylesheet_generalstyles_globaltoggle_iconhighlighted.PNG

 

Once everything is all set up and looking great on all devices, you can opt to make small design refinements only for the Mobile version.

This is a great option if you have images and text areas that may not align well from the desktop state to stacked one-column on mobile. Use the mobile toggle to adjust how the images and text display/align just for mobile.

 

Example, changing email background for mobile only

Let's say you want to change the email background from your global white to light grey just for mobile.

 

1. In your Modern Editor email, go to the Stylesheet tab.

WF_ME_stylesheet.PNG

 

2. Select Email Background.
WF_ME_stylesheet_emailbackground.PNG

 

3. Click the Mobile toggle.
The preview will scale down to mobile size and you'll see the globe icons change to phones.

WF_ME_stylesheet_emailbackground_mobiletoggle.PNG

 

4. Open the Container.

WF_ME_stylesheet_emailbackground_container.PNG

5. Update the background to a light grey.
The mobile background color will change to grey. Use the Preview slider to watch the color switch to white once the preview is larger than 480px.

WF_ME_stylesheet_emailbackground_containercolor.PNG

Mobile rendering with gray background ...

Mobilewithgraybg.PNG

 

Desktop rendering with white background ...

Desktopwithgraybg.PNG

 

***Not seeing this option? This feature is available for "WordFly 3.0.0.538" emails or greater (Version can be found on Line 3 in the HTML Editor). Create a brand new email to use this feature.

Have more questions? Submit a request
Powered by Zendesk