Sunday, July 19, 2026
HomeiOS Developmentcss - iOS Mail — HTML e-mail signature renders too small

css – iOS Mail — HTML e-mail signature renders too small

[ad_1]

Coding inline and with tables, I made a easy HTML e-mail signature that incorporates two photos. Once I ship it from MacOS Mail a number of totally different shoppers, it really works nicely on desktop. On iOS Mail, it shrinks down the scale of the desk, which is anticipated habits, however it makes it considerably smaller than it must be, thus making my font-sizes tiny.

IMG-8296.png

The desk has a 3 row, 2 column construction, two coloured rows and one white one which has a colspan for full desk width.

Issues I’ve examined to no impact:

  • kind of textual content content material
  • giving the cells a width in pixels
  • giving the entire desk width:100%
  • marking photos show:block or show:inline

Apparently iOS Mail thinks the desk is wider than it’s, or not less than treats it that means.

Once I take away the photographs the 2 columns turn into equally large and the desk fills the entire width. So I am in search of an answer in how the photographs are styled; does anybody know if I can add some CSS or HTML attribute to the photographs to repair this?

Here is the code, stripped of some textual content styling to maintain it legible:

<desk border="0" cellspacing="0" cellpadding="0" >
    <tr>
      <td valign=prime model="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:prime;">
        <div model="font-size:13px; ">
          <div model="font-size:16px;font-weight:600;">Title of the sender </div>
          <div>Description of the position of the sender</div>
        </div>
      </td>
      <td valign=prime model="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:prime;">
        <img src="https://stackoverflow.com/questions/73302506/brand.png" width=124 top=41 alt="Org brand" model="width:124px;top:41px;show:inline;" />
      </td>
    </tr>
    <tr>
      <td valign=backside model="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:backside;">
        <div><img src="line.png" alt="divider" width=210 top=24 model="width:210px;top:24px;show:inline;" /></div>
        <div model="font-size:13px;">06 1234 5678</div>
      </td>
      <td valign=backside model="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:backside;">
        <div model="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
        <div model="font-size:13px;"><a href="#" model="text-decoration:none;">organisation.nl</a></div>
      </td>
    </tr>
    <tr>
      <td colspan=2 model="padding:20px;">
        <p model="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
      </td>
    </tr>
  </desk> 

[ad_2]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments