How To Show Email Content On Mobile Devices Only

Showing email content on mobile devices only isn’t as easy as applying “display:none” to the element, it requires a lot more code. Using this technique you can choose what you show on elements ONLY on mobile devices.

The CSS

Use this CSS in the HEAD section of your HTML file. This will show the element on PHONES ONLY. Notice how almost every property is overridden by !important. This is important!

The HTML

Next add the class(“mobshow”), which was just created above, to the HTML element you want to hide on desktop email clients. Also, add the style property with these attributes.

Supported Email Clients

This technique is supported in all the major desktop based, mobile based, and web based email clients. The only exception is Lotus Notes 6.5 and Lotus Notes 7

[pb_space height=”40″][/pb_space]

Questions?

Email me, or send me a tweet @jennamolby.