So I am working to build some new templates for my company to be used in email broadcasts, and am running into some trouble with mobile email clients. Specifically, my text gets way too small in Android and iOS.
Now, I can just use my media query to target iOS if necessary and adjust the font size as I see fit, but that's not possible as far as I know for Android, leaving me with incredibly tiny text.
My code is below, the main part I am having issue with is bodyleft cell, where the font size is a standard 16 pixels, and looks fine everywhere but mobile. -webkit-text-size-adjust: none; was not used as I DO want the size to adjust up, and it wasn't making a difference in this case anyway.
Any help would be much appreciated, thank you!
<style type="text/css">
td img {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
@media screen and (max-width: 600px) {
body[yahoo] .border {
width:98% !important;
min-width:auto !important;
}
body[yahoo] .main {
width:100% !important;
}
body[yahoo] .body {
width:90% !important;
}
body[yahoo] .spacer {
display: none !important;
}
body[yahoo] .footer {
width:90% !important;
}
body[yahoo] .bodyleft {
float: left;
margin-bottom: 20px;
}
body[yahoo] .bodyright {
float: left;
width:100% !important;
}
body[yahoo] img {
height: auto !important;
}
body[yahoo] .sideimagesa {
float:left;
width:48% !important;
margin-bottom:10px !important;
}
body[yahoo] .sideimagesb {
float:right;
width:48% !important;
margin-bottom:10px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin:0px;" bgcolor="#EF9A9A">
<div>
<table style="border-collapse:collapse;" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#EF9A9A" style="padding-top:20px; padding-bottom:20px;"><table class="border" style="width:660px; min-width:660px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F44336">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header" style="font-family:Arial, Helvetica, sans-serif;" align="center"><img style="display:block" src="http://images.theonlineimages.com/ima/650x200.jpg" alt="" width="100%" /></td>
</tr>
<tr>
<td class="headline" style="padding-top:15px; padding-bottom:15px;" align="center" bgcolor="#F44336"><strong><a style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; text-decoration:none;" href="http://en.wikipedia.org">This Can Be Your First Call to Action Link</a></strong></td>
</tr>
<tr>
<td style="padding-top:20px;">
<table class="body" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="bodyleft" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#212121; line-height:22px;" valign="top">Any text you want to include to explain what you are offering would be placed here. This includes any and all incentives. The text can be <strong>bolded</strong> or <em>italicized</em> for emphasis. Individual segments of text can also have their sizes and colors changed in order to add emphasis that way.<br />
<br />
<strong><span style="color:#B71C1C">Header Text</span></strong> <br />
<br />
You can use headers to separate your ideas, and have <a style="color:#B71C1C" href="#">hyperlinks</a> throughout your text. Pictures on the right side can be used to show off what you are advertising. Greater or fewer images can be included, and they can be switched to the left side if preferred. Images will be entered at the exact widths shown, but heights can vary without issue.
<br />
<ul style="margin-top:19px;margin-bottom:19px;">
<li>A bullleted or numbered list</li>
<li>can be used</li>
<li>to itemize your text</li>
</ul>
All colors are completely up to you. This includes links, text, borders and backgrounds. Each of these can be changed to whatever color you like.<br />
<br />
<table style="border-collapse:collapse;" class="cta" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="center" bgcolor="#F44336"><a style="font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#ffffff; text-decoration:none; line-height:42px;" href="http://en.wikipedia.org"><strong>Press Here if You Want to
Learn More</strong></a></td>
</tr>
</table></td>
<td class="spacer" style="width:20px;"> </td>
<td class="bodyright" style="width:210px;" valign="top"><table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-top:20px; padding-bottom:20px;"><table class="footer" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#212121" align="center">You can put disclaimers, contact info, or any other footer information you might want to include here</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
