iPhone Mail rendering emulator

How to fix the template

The font sizes are fine (body text is 19 px). The problem is the fixed 600 px layout: on a 390 px iPhone screen, Apple Mail shrinks the whole email to 65%, so the text appears around 12 px. Users can't fix this with device settings, and pinch-zoom doesn't re-wrap the lines. These four changes make the template fit the screen:

1. Add a viewport meta tag

+ <meta name="viewport" content="width=device-width, initial-scale=1">

2. Make the outer container fluid, capped at 600 px

- <table cellspacing="0" cellpadding="0" border="0" width="600">
+ <!--[if mso]><table width="600" align="center"><tr><td><![endif]-->
+ <table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width:600px;">
  ...
+ <!--[if mso]></td></tr></table><![endif]-->

The [if mso] wrapper keeps the 600 px width in Outlook for Windows, which ignores max-width.

3. Remove the fixed widths from the inner blocks

- <table bgcolor="#ffffff" border="0" width="570" ...>
+ <table bgcolor="#ffffff" border="0" width="100%" ...>

- <div style="padding-left:15px; padding-right:15px; width:540px; font-size:19px; ...">
+ <div class="inner" style="padding-left:15px; padding-right:15px; font-size:19px; ...">

- <td><div style="... display:inline-block; width:270px;"></div></td>   (empty spacer cell)
+ <div class="inner" style="text-align:right; ..."><b>Association name</b></div>

4. Optional: tighten padding and the headline on phones

+ <style>
+   @media only screen and (max-width:600px) {
+     .outer-pad { padding:4px !important; }
+     .inner { padding-left:12px !important; padding-right:12px !important; }
+     .title { font-size:30px !important; line-height:34px !important; }
+   }
+ </style>

The complete fixed template is in "Edit / paste email HTML" below (right-hand box). Test it in the default Apple Mail app on an iPhone held upright.