CODEWITHSUNDEEP
htmlcsshtml-email
Acexe
Acexe

Reputation: 1

How do I make email signature compatible with mobile platforms?

I am not a coder by any means but good enough to piece together this and that. I've managed to come up with an email signature that looks great on pc but absolute dog crap on mobile platforms. I've been searching and searching online but perhaps I don't have the basic understanding of what I'm reading to get to the final point I'm attempting.

<body>

  <table align=role="contentinfo" cellspacing="0" cellpadding="0" width="600" style="margin: 0 auto;">
    <tr>
      <td width="relative" style="direction: ltr  ">



        <span style="margin-top: 0in; margin-right: 0in; margin-bottom: 0in; margin-left: 0in; line-height: normal; font-size: 15px; font-family: 'Calibri', sans-serif;">
    <span style="font-family: 'Constantia', serif; color: red;">Matt Robbins</span><span style="font-family: 'Constantia', serif;">&nbsp;<strong>|</strong>&nbsp;</span>
        <span style="font-size: 12px; font-family: 'Calibri Light', sans-serif;">Vice President of Business Development</span>
        </span>

        <p style="margin-top: 0in; margin-right: 0in; margin-bottom: 0in; margin-left: 0in; line-height: normal; font-size: 15px; font-family: 'Calibri', sans-serif;">
          <strong>
        <span style="font-size: 12px;">Vision Plastics Inc &ndash; &ldquo;Concept to Completion&rdquo;
          </span>

<img src="https://secureservercdn.net/198.71.233.187/n1g.186.myftpupload.com/wp-content/uploads/2016/05/logo-large.png?time=1654600033" alt="" class="" clear:both width="130" height="40" align="right" style="margin-right: 0in; margin-top: 0in;margin-bottom: 0in;">

   <hr style="height:2px; width:100%; color:red;  text-align: left;">
    </strong>

Upvotes: 0

Views: 71

Answers (1)

tacoshy
tacoshy

Reputation: 13008

The issue is caused by the width="600"-attribute on your table. That requires a screen to be 600px wide (most mobile devices are not with 320-480px width). So remove that attribute and add to the style-attribute:

width: 100%; max-width: 600px;


<body>

  <table align=role="contentinfo" cellspacing="0" cellpadding="0"  style="margin: 0 auto; width: 100%; max-width: 600px;">
    <tr>
      <td width="relative" style="direction: ltr  ">



        <span style="margin-top: 0in; margin-right: 0in; margin-bottom: 0in; margin-left: 0in; line-height: normal; font-size: 15px; font-family: 'Calibri', sans-serif;">
    <span style="font-family: 'Constantia', serif; color: red;">Matt Robbins</span><span style="font-family: 'Constantia', serif;">&nbsp;<strong>|</strong>&nbsp;</span>
        <span style="font-size: 12px; font-family: 'Calibri Light', sans-serif;">Vice President of Business Development</span>
        </span>

        <p style="margin-top: 0in; margin-right: 0in; margin-bottom: 0in; margin-left: 0in; line-height: normal; font-size: 15px; font-family: 'Calibri', sans-serif;">
          <strong>
        <span style="font-size: 12px;">Vision Plastics Inc &ndash; &ldquo;Concept to Completion&rdquo;
          </span>

<img src="https://secureservercdn.net/198.71.233.187/n1g.186.myftpupload.com/wp-content/uploads/2016/05/logo-large.png?time=1654600033" alt="" class="" clear:both width="130" height="40" align="right" style="margin-right: 0in; margin-top: 0in;margin-bottom: 0in;">

   <hr style="height:2px; width:100%; color:red;  text-align: left;">
    </strong>

Upvotes: 1

Related Questions