HTML Gmail signature appearing differently in iOS Mail - html

Question

I have put together the following email signature and pasted it in to gmail. I've tested it thoroughly, but have recently noticed a problem where iOS Mail app forces the body text of the email to 50% width of the screen (See screenshot attached).
I've tried inserting media queries which I now know get stripped from Gmail. I also tried removing the table and creating the signature with p tags and inline styles. That messed up the width even more.
So I just can't understand why iOS mail changes the width of the body text above the signature?
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody><tr>
<td style="line-height: 100%;">
<table cellpadding="0" cellspacing="0" border="0" align="left" height="274"
style=" border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 480px;">
<tbody>
<tr>
<td colspan="2">
<a href="http://www.hostel.com/" target="_blank">
<img src="http://i57.tinypic.com/2vmar0i.png" style="padding: 12px 20px 0 0;">
</a>
</td>
</tr>
<tr>
<td colspan="2" valign="center" height="5">
<p style="font-family: Arial; font-weight: bold;
font-size: 19px; line-height: 1.3; text-align: left; padding: 10px 0; margin: 20px 0 10px 20px;">
Senders Name<br>
<span style="font-size: 16px;">Job Title</span>
</p>
</td>
</tr>
<tr style="height: 50px;">
<td valign="top" style="line-height: 100%; width: 47%;">
<p style="line-height:1.7; margin-top: 0px; font-size: 11px; padding-right: 10px; margin-left: 20px;">
<a href="https://goo.gl/maps/twgHt" target="_blank" style="text-decoration: none !important; color: #000 !important;">
<strong>Address</strong><br>
Street Name<br>
London</p></a>
</td>
<td width="230" valign="top" style="line-height:1.7">
<p style="line-height:1.7; margin-top: 0px; font-size: 11px;">
<strong>T</strong>:
[phone]<br>
<strong>M</strong>:
[phone]<br>
<strong>W</strong>:
<a href="http://www.hostel.com/" target="_blank" style="color: #000; text-decoration: none;">
www.hostel.com </a></p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="
padding: 7px 15px;
font-size: 12px;
font-weight:bold;
letter-spacing: 0.8px;
display: inline-block;
background: #FFD558;
margin: 20px 0 0 20px;">
<a href="https://twitter.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Twitter</a> |
<a href="https://www.facebook.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Facebook</a> |
<a href="https://plus.google.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Google+</a> |
<a href="http://instagram.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Instagram</a> |
<a href="http://www.pinterest.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Pinterest</a>
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="
font-size: 10px;
color: #ADADAD;
padding-top: 15px;
border-top: 2px solid #CCC;
line-height: 1.5;
margin: 0 20px;
width: 83%;">
This email and any files transmitted with it are confidential and intended
solely for the use of the individual or entity to whom they are addressed.
No Curfew Ltd trading as 'Name' is a registered company
with registration number 123456789.
</p>
</td>
</tr>
</tbody></table>
</td>

Answer 1

The iPhone resizes the email to the largest element. (Email on Acid)
The cause of the resize is your signature, as the largest element, and is likely caused by the 2 columns you have for address and contact info. Despite being resized by your media queries, the table cells of these two columns are pushed wider to accommodate the text. This causes the table to become wider than defined and break the CSS layout you set up.
To fix this, I would change it to a responsive design with 2 tables (left and right align) instead of 2 columns. This should likely solve your problem.
By having it 2 tables, you can make the contact info slide underneath the address when mobile (or vice versa) so that both can still be full width and not stretch the table. (Campaign Monitor 2-1 column Responsive Design walkthrough)