Display

There are times when you don’t want to display the exact same mailer content on desktop and mobile devices. There are certain emailer parts which you want to hide/show either from your desktop users or the users of mobile devices. With the Display utility, the content hide and show issue could be solved in no time.

The MailBox Framework includes utility classes to hide and show elements on desktop and mobile view. Simply add classes .show and, .hide to show/hide element on desktop view. On the mobile view, add classes .show–small and .hide–small to manage display behavior of an element.

Code
<!-- Navigation Items -->
<table class="row" align="left" cellspacing="0" cellpadding="0" role="presentation" border="0">
   <tbody>
      <tr>
         <td class="nav-item" valign="middle" align="center">
            <a class="nav-link" href="http://" class="" target="_blank">
               About
            </a>
         </td>
         <td class="nav-item" valign="middle" align="center">
            <a class="nav-link" href="http://" class="" target="_blank">
               Services
            </a>
         </td>
         <td class="nav-item" valign="middle" align="center">
            <a class="nav-link" href="http://" class="" target="_blank">
               Work
            </a>
         </td>
         <td class="nav-item" valign="middle" align="center">
            <a class="nav-link" href="http://" class="" target="_blank">
               Blogs
            </a>
         </td>
         <td class="nav-item hide--small" valign="middle" align="center">
            <a class="nav-active" href="http://" class="" target="_blank">
               Contact
            </a>
         </td>
      </tr>
   </tbody>
</table>
Preview