CODEWITHSUNDEEP
cssiosemailhtml-email
liteowl
liteowl

Reputation: 63

iOS Mail — HTML email signature renders too small

Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.

IMG-8296.png

The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.

Things I have tested to no effect:

Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.

When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?

Here's the code, stripped of some text styling to keep it legible:

<table border="0" cellspacing="0" cellpadding="0" >
    <tr>
      <td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
        <div style="font-size:13px; ">
          <div style="font-size:16px;font-weight:600;">Name of the sender </div>
          <div>Description of the role of the sender</div>
        </div>
      </td>
      <td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
        <img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
      </td>
    </tr>
    <tr>
      <td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
        <div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
        <div style="font-size:13px;">06 1234 5678</div>
      </td>
      <td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
        <div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
        <div style="font-size:13px;"><a href="#" style="text-decoration:none;">organisation.nl</a></div>
      </td>
    </tr>
    <tr>
      <td colspan=2 style="padding:20px;">
        <p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
      </td>
    </tr>
  </table>

Upvotes: 1

Views: 1040

Answers (1)

Nathan
Nathan

Reputation: 5204

First, make your table width 100%:

<table border="0" cellspacing="0" cellpadding="0" width="100%">

That will make it fit the full width of its container.

Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:

<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>

I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.

Continue to use the width and height attributes because Outlook Windows desktop uses them.

Upvotes: 1

Related Questions