Text in HTML table not rendering/reducing in iPhone Mail - html

Question

The text blocks inside my table do not render correctly when viewed in Apple Mail on the iPhone. However, the text appears fine on Outlook 2003, 2007, 2010, and Apple Mail on the desktop. On the iPhone it does not reduce with the rest of the email. The body email appears to render correctly, but not the footer text (both of which are inside tables). The only other place the text does not appear correctly is the date line at the top.
This is the portion of the style sheet affecting the footer:
.FooterText {
font-size: 7pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 11pt;
}
a.FooterLink {
font-size: 7ptem;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 6pt;
font-style: normal;
text-align: center;
}
</style>
</head>
This is the code for the footer area:
<table width="650" border="0" cellspacing=0 cellpadding=0 bgcolor="#0064C8">
<tr>
<td width="2%"> </td>
<td width="19%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Unsubscribe</strong></p>
<p class="FooterText">You are receiving this email because you are a member of NALP.</p>
<p class="FooterText">To unsubscribe from this [email type] related emails, please
<unsubscribe style="text-decoration:none; color:#FFFFFF;">click here</unsubscribe>
.</p></td>
<td width="26%" style="padding-top: 15px; padding-left: 12px; padding-right: 10px; padding-bottom:25px" class ="FooterText"><p class ="FooterText"><strong>Discover NALP</strong></p>
<p>About NALP<br />
Conferences & Events<br />
Member Portal<br />
NALPconnect<br />
<a href="https://netforum.avectra.com/eweb/shopping/shopping.aspx?site=nalp&webcode=shopping&cart=0&shopsearchCat=Merchandise&sort=4&" class="FooterLink" >Bookstore</a><br />
Job Center</p></td>
<td width="28%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class="FooterText"><strong>About NALP</strong></p>
<p class="FooterText">NALP believes in fairness, facts, and the power of a diverse community. We work every day to be the best career services, recruitment, and professional development organization in the world because we want the lawyers and law students we serve to have an ethical recruiting system, employment data they can trust, and expert advisers to guide and support them in every stage of their careers.</p></td>
<td width="24%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Contact Us</strong></p>
<p class="FooterText">NALP<br />
1220 19th Street, NW<br />
Suite 401<br />
Washington, DC 20036</p></td>
</tr>
</table>
I've tried some a media query to reduce the font size but doesn't seem to work either:
#media only screen and (max-device-width: 480px) {
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
}
a.FooterLink {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 4pt;
font-style: normal;
text-align: center;
}
}

Answer 1

First of all use text size in pixels, and add this in your style: -webkit-text-size-adjust:none;
ie:
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
-webkit-text-size-adjust:none;
}