Hide and Seek, if you're an #emailgeek

Pine includes responsive utilities that make it easy to show or hide elements on mobile. Use these classes on any elements you have hidden for desktop.

You can add them to any element you need aligned differently on mobile. Keep in mind that, depending on your layout, the left/right alignment classes might cause issues, as they are using float, which takes the element out of the normal flow.

Hiding on Desktop #

Hiding email content from desktop email clients is tricky. Besides inconsistent support for display: none; we also have to put up with Outlook, which needs special attention as always.

style="display: none; font-size: 0; line-height: 0;" is enough to hide content in the majority of email clients. When adding the show-sm class, all three properties are reset and the element becomes visible on mobile.

Outlook 2007 - 2016 #

The above CSS won't be enough for Outlook's Word-based rendering engine, though: nested tables in particular won't be hidden if you use it. We need to wrap the content we want hidden inside Microsoft Outlook-specific comments, like this:

As you can see, Yahoo! requires us to be very specific about what we want to hide. The CSS properties used to hide the main table won't have any effect on the table cell(s) in this email client, so we need to add them to each cell as well.

Preheaders #

A practical use for hiding content on desktop is the preheader ↗. Here is the minimum viable code for an email preheader:

Next Up: Text →

Current Version