How do I hide content on mobile? (Modern Editor)

Modern Editor: How do I hide content on mobile?

When building responsive emails there may be specific content in your email that would be better off hidden when a mobile device opens the email. For example, design elements such as a long navigation bar, menus, or right/left aligned images that you would prefer to hide on mobile devices. Any block in your email can be hidden with a “mobile-hide” class.

 

Adding mobile-hide class to blocks

 

1. Go to Email > Email Templates.

Menu_emailtemplates.PNG

 

2. Click on the name of your email, select View/Edit.

Emails_EmailTemplates_vieweditemail.PNG

 

3. Select Edit in WordFly.

EditinWordFly.PNG

 

4. Select any block from your email preview panel.

ME_textblock_withpreview2.PNG

 

5. Hide content on mobile by adding a 'mobile-hide' option in a few different ways:


**For emails created earlier than version "WordFly 3.0.0.523"
(Version can be found on Line 3 in the HTML Editor)**

 

Add “mobile-hide” to the class field.

For images, click on the class field and enter "mobile-hide"

ME_imageblock_mobilehideclass.PNG


For text areas, select your content and use the CSS button to select "mobile-hide"

ME_textblock_css_mobilehide.PNG

 

**For "WordFly 3.0.0.523" emails or later
(Version can be found on Line 3 in the HTML Editor)**

 

Just click on the the check-box in any block to hide the block on mobile.

ME_textarea_hideonmobile.PNG

 

(Would you rather update your email this way? Click here to find instructions for upgrading your email with this code.)

 

6. Use the slider bar to watch your email update to the mobile view while hiding that specific content with the new “mobile-hide” class.


ME_sliderbar.PNG

Have more questions? Submit a request
Powered by Zendesk