How to create a responsive design of a signature

There are standard CSS media queries, which help to adjust the styling of an email signature to suit the user's current device. 

This CSS styling is not universally supported by all email clients yet. But it works when the email is sent from Mail app or Outlook app on iOS using the server-side option and also when the email is sent from Apple Mail on Mac.

Responsive signature design created in Xink works when sent

from

• Mail app and Outlook app on iOS using server-side.
• Outlook app on Android.
• Apple Mail

to

• Mail app and Outlook app on iOS.
• Outlook app on Android.
• Outlook desktop on MAC.

Please try to use the code below in your signature and style email sent from iOS and from Apple Mail on MAC to iOS and Outlook desktop on your end.

<style type="text/css">#body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color: red;
        }
      }
@media screen and (max-width: 500px) {
        .colored {
          color: blue;
        }
      }
</style>
<div id="body">
<p><span>Thank you,</span><br />
<strong>((FirstName))</strong><br />
&nbsp;</p>

<p class="colored">This text is blue if the window width is below 500px and red otherwise.</p>
</div>

<table border="4" cellpadding="0" cellspacing="0" style="width: 500px;">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>