Bryce York
Reputation: 1056
Font Size Refuses To Change on iPhone Email
I've spent about 4 hours on this HTML email template and no matter what I change the font refuses to increase on the iphone.
I'm at my wits end and would appreciate any help I can get before my mind EXPLODES.
Thanks in advance.
Code and screenshot included below.
I'm simply looking for the font to be bigger enough that it's legible. Just want the body copy to be the size of the heading and the heading to still be about the same amount bigger.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style type="text/css">
table, tr, td {font-size:16px; }
table {border-collapse: collapse;}
.content {width: 640px !important;}
td.fw {padding:25px 25px 25px 25px}
td.hw.l {padding:25px 20px 25px 25px}
td.hw.r {padding:25px 25px 25px 20px}
.whitetxt {color:#ffffff;}
.null {padding:0px 0px 0px 0px;}
.blue {color:#0085c1;}
.red {color:#fa696e; }
.twenty {font-size:20px;}
.h1 {font-size:28px; font-weight: bold;}
.h2 {font-size:18px; font-weight: bold;}
.thirteen {font-size:13px;}
.sixteen {font-size:16px;}
.thirty-four {font-size:34px; font-weight:bold;}
.strong {font-weight:bold;}
.middle {vertical-align:middle;}
.bottom-border {border-bottom: 2px solid #f1f1f0}
@media only screen and (max-device-width: 480px) {
[class=content] {width: 320px !important;}
[class=thirteen] {font-size:16px;}
}
</style>
</head>
<body style="margin:0 0 0 0; padding:0 0 0 0; font-family: Arial, Verdana, Sans Serif;color:#3c3c3c; -webkit-text-size-adjust:none;">
<table width="100%" style="font-size: 15px;border-collapse: collapse;">
<tbody>
<tr >
<td width="auto" ></td>
<td width="80%" class="content" style="font-size: 15px;width: 640px;">
<!-- main content table -->
<table class="main-table" style="font-size: 15px;border-collapse: collapse;">
<tr class="fw" >
<td class="fw middle" valign="middle" colspan="2" style="font-size: 15px;vertical-align: middle;padding: 25px 25px 25px 25px;">
<img align="left" class="logo" src="http://meetbryce.com/client-files/mim/logo.png" alt="Make It Mine" border="0"><span class="thirty-four" style="font-size: 34px;font-weight: bold;">thank you for applying!</span><br>
<span class="red sixteen" style="color: #fa696e;font-size: 16px;">your account number is <strong>CFA0027852</strong></span>
</td>
</tr>
<tr class="fw" >
<td class="fw whitetxt" colspan="2" bgcolor="#004d7c" style="font-size: 1px;color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="thirteen" style="font-size: 13px;">We appreciate your order! Please find attached the relevant paperwork for your new computer. It's in PDF format so you'll need a modern browser or Adobe Reader to open it. You will also get the paperwork via post in your letterbox, it will include a prepaid envelope for easy return to us.</span>
</td>
</tr>
<tr class="hw" >
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="font-size: 15px;padding: 25px 20px 25px 25px;">
Jonathan Swanston <span class="blue" style="color: #0085c1;">is my name</span><br><br>
[email protected] <span class="blue" style="color: #0085c1;">is my email</span><br><br>
0425-353-217 <span class="blue" style="color: #0085c1;">is my phone</span>
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="font-size: 15px;padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my sex is</span> Male<br><br>
<span class="blue" style="color: #0085c1;">my birthday is</span> 4th November, 1988<br><br>
<span class="blue" style="color: #0085c1;">my benefit is</span> 111-555-666-1
</td>
</tr><tr class="null" style="font-size: 15px;padding: 0px 0px 0px 0px;">
<td class="null" colspan="2" bgcolor="#ecf4f7" align="center" style="font-size: 15px;padding: 0px 0px 0px 0px;">
<img src="http://meetbryce.com/client-files/mim/divider.png" width="100%" alt=" " border="0">
</td>
</tr>
<tr >
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="font-size: 15px;padding: 25px 20px 25px 25px;">
<span class="blue" style="color: #0085c1;">my home address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="font-size: 15px;padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my delivery address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
</tr>
<tr class="fw" >
<td class="fw whitetxt" colspan="2" bgcolor="#0085c1" align="center" style="font-size: 15px;color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="h1" style="font-size: 28px;font-weight: bold;">what you've applied for... nice!</span>
</td>
</tr>
<tr class="null" style="font-size: 15px;padding: 0px 0px 0px 0px;">
<td class="null bottom-border" colspan="2" style="font-size: 15px;padding: 0px 0px 0px 0px;border-bottom: 2px solid #f1f1f0;">
<a href="#" target="_blank"><img src="http://meetbryce.com/client-files/mim/ipad.png" width="100%" alt="apple ipad 3 - 3G/WiFi 16gb - $30/week - $120/month - all together $1,560" border="0"></a>
</td>
</tr>
<tr class="fw" >
<td class="fw bottom-border" colspan="2" style="font-size: 15px;border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 18px;font-weight: bold;">Step 1. Set up your Centrelink deduction by:</span>
<br><br>
<span class="blue" style="color: #0085c1;">Logging into your Centrelink account online at http://www.centrelink.gov.au</span>
<ul>
<li>Select ‘Deductions’, ‘add new deduction’ then click ‘Start’</li>
<li>Enter the service providers CRN “555074568C”</li>
<li> Select service category ‘Food Clothing and Household Items’ and click continue</li>
<li>Select ‘MAKE IT MINE / COMPUTERS FOR ALL’ and click continue</li>
<li>Use the purchase details above to complete the deduction amount (fortnightly amount), frequency, start date (ASAP) and target amount.</li>
<li>Confirm that all details are correct!</li>
</ul>
<span class="blue" style="color: #0085c1;">Or call Centrelink on 13 61 50</span>
<ul>
<li>Let the Centrelink employee know that you wish to start payments into the "Make It Mine / Computers For All account" account.</li>
<li>You will need to quote our Centrelink Reference Number: “555074568C”</li>
<li>Provide the purchase details above to the Centrelink employee</li>
</ul>
<span class="blue" style="color: #0085c1;">Or visit a Centrelink outlet</span>
</td>
</tr>
<tr class="fw" >
<td class="fw bottom-border" colspan="2" style="font-size: 15px;border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 18px;font-weight: bold;">Fast track your application</span>
<br><br>
You can fast track your application by setting up your Centrelink deductions online and emailing or faxing your signed paperwork to us!
<br><br>
<span class="blue sixteen" style="color: #0085c1;font-size: 16px;">Fast tracked applications can be approved within days and the package dispatched on approval!</span>
<br><br>
An additional copy of your paperwork will also be sent to your postal address. Once your paperwork is returned, and payments have been confirmed your order will move to the final stages of processing. Most orders ship directly through the manufacturer. Processing takes up to two working days after your account is approved for dispatch. After this point, please allow up to 8-10 working days for your order to be delivered. We will email and SMS you at every stage of the order progression.
</td>
</tr>
<tr class="fw" >
<td class="fw" colspan="2" style="font-size: 15px;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 18px;font-weight: bold;">Download your application receipt</span>
<br><img src="http://meetbryce.com/client-files/mim/pdf.png" alt=" " align="left" border="0">
<span class="red strong" style="color: #fa696e;font-weight: bold;">contract-ord587fd27-1695-4a7e-8562-873ce4f087b6.pdf</span><br>
<strong>1206k</strong> <a href="#" target="_blank">View</a> <a href="#" target="_blank">Download</a>
</td>
</tr>
<tr class="hw" >
<td class="fw" bgcolor="#f1f1f0" style="font-size: 15px;padding: 25px 25px 25px 25px;">
<img src="http://meetbryce.com/client-files/mim/footer-logo.png" alt="Make it Mine copyright © 2012 make it mine.<br>all rights reserved" align="left" border="0">
</td>
<td class="fw" bgcolor="#f1f1f0" style="font-size: 15px;padding: 25px 25px 25px 25px;">
<a href="#"><img src="http://meetbryce.com/client-files/mim/footer-facebook.png" alt="We like you… do you like us?" border="0"></a>
</td>
</tr>
</table>
<!-- end main content table -->
</td>
<td width="auto" ></td>
</tr>
</tbody>
</table>
</body>
</html>
Upvotes: 2
Views: 3533
Answers (1)
Bryce York
Reputation: 1056
Changing the units for font sizing holds the answer.
I changed the units for all the pseudo-headings to >1em and removed
table,tr,td {font-size:14px;}
This would have left it to assume that the font size was 1em.
I then added the @media-query to call a line of code that multiplied all font-sizes within the tables by 1.2 using the following:
@media only screen and (max-device-width: 480px) {
table {font-size:1.2em;}
}
Now looks like this:
If you're interested in the full code -- here it is:
<head>
<style type="text/css">
@media only screen and (max-device-width: 480px) {
table {font-size:1.2em;}
[class=small-only] {display:inline;}
}
</style>
</head>
<body style="margin:0 0 0 0; padding:0 0 0 0; font-family: Arial, Verdana, Sans Serif;color:#3c3c3c;">
<table width="100%" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="auto"></td>
<td width="80%" class="content" style="width: 640px;">
<!-- main content table -->
<table class="main-table" style="border-collapse: collapse;">
<tr class="fw">
<td class="fw middle" valign="middle" colspan="2" style="vertical-align: middle;padding: 25px 25px 25px 25px;">
<img align="left" class="logo" src="http://meetbryce.com/client-files/mim/logo.png" alt="Make It Mine" border="0"><span class="thirty-four" style="font-size: 2em;font-weight: bold;">thank you for applying!</span><br>
<span class="red twenty" style="color: #fa696e;font-size: 1.2em;">your account number is <strong>CFA0027852</strong></span>
</td>
</tr>
<tr class="fw">
<td class="fw whitetxt" colspan="2" bgcolor="#004d7c" style="color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="thirteen" style="font-size: .9em;">We appreciate your order! Please find attached the relevant paperwork for your new computer. It's in PDF format so you'll need a modern browser or Adobe Reader to open it. You will also get the paperwork via post in your letterbox, it will include a prepaid envelope for easy return to us.</span>
</td>
</tr>
<tr class="hw">
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="padding: 25px 20px 25px 25px;">
Jonathan Swanston <span class="small-only" style="display: none;"><br></span><span class="blue" style="color: #0085c1;">is my name</span><br><br>
[email protected] <span class="small-only" style="display: none;"><br></span><span class="blue" style="color: #0085c1;">is my email</span><br><br>
0425-353-217 <span class="small-only" style="display: none;"><br></span><span class="blue" style="color: #0085c1;">is my phone</span>
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my sex is</span><span class="small-only" style="display: none;"><br></span> Male<br><br>
<span class="blue" style="color: #0085c1;">my birthday is</span> <span class="small-only" style="display: none;"><br></span>4th November, 1988<br><br>
<span class="blue" style="color: #0085c1;">my benefit is</span> <span class="small-only" style="display: none;"><br></span>111-555-666-1
</td>
</tr><tr class="null" style="padding: 0px 0px 0px 0px;">
<td class="null" colspan="2" bgcolor="#ecf4f7" align="center" style="padding: 0px 0px 0px 0px;">
<img src="http://meetbryce.com/client-files/mim/divider.png" width="100%" height="auto" alt=" " border="0">
</td>
</tr>
<tr>
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="padding: 25px 20px 25px 25px;">
<span class="blue" style="color: #0085c1;">my home address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my delivery address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
</tr>
<tr class="fw">
<td class="fw whitetxt" colspan="2" bgcolor="#0085c1" align="center" style="color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="h1" style="font-size: 2em;font-weight: bold;">what you've applied for... nice!</span>
</td>
</tr>
<tr class="null" style="padding: 0px 0px 0px 0px;">
<td class="null bottom-border" colspan="2" style="padding: 0px 0px 0px 0px;border-bottom: 2px solid #f1f1f0;">
<a href="#" target="_blank"><img src="http://meetbryce.com/client-files/mim/ipad.png" width="100%" height="auto" alt="apple ipad 3 - 3G/WiFi 16gb - $30/week - $120/month - all together $1,560" border="0"></a>
</td>
</tr>
<tr class="fw">
<td class="fw bottom-border" colspan="2" style="border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 1.4em;font-weight: bold;">Step 1. Set up your Centrelink deduction by:</span>
<br><br>
<span class="blue" style="color: #0085c1;">Logging into your Centrelink account online at http://www.centrelink.gov.au</span>
<ul>
<li>Select ‘Deductions’, ‘add new deduction’ then click ‘Start’</li>
<li>Enter the service providers CRN “555074568C”</li>
<li> Select service category ‘Food Clothing and Household Items’ and click continue</li>
<li>Select ‘MAKE IT MINE / COMPUTERS FOR ALL’ and click continue</li>
<li>Use the purchase details above to complete the deduction amount (fortnightly amount), frequency, start date (ASAP) and target amount.</li>
<li>Confirm that all details are correct!</li>
</ul>
<span class="blue" style="color: #0085c1;">Or call Centrelink on 13 61 50</span>
<ul>
<li>Let the Centrelink employee know that you wish to start payments into the "Make It Mine / Computers For All account" account.</li>
<li>You will need to quote our Centrelink Reference Number: “555074568C”</li>
<li>Provide the purchase details above to the Centrelink employee</li>
</ul>
<span class="blue" style="color: #0085c1;">Or visit a Centrelink outlet</span>
</td>
</tr>
<tr class="fw">
<td class="fw bottom-border" colspan="2" style="border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 1.4em;font-weight: bold;">Fast track your application</span>
<br><br>
You can fast track your application by setting up your Centrelink deductions online and emailing or faxing your signed paperwork to us!
<br><br>
<span class="blue sixteen" style="color: #0085c1;font-size: 1.1em;">Fast tracked applications can be approved within days and the package dispatched on approval!</span>
<br><br>
An additional copy of your paperwork will also be sent to your postal address. Once your paperwork is returned, and payments have been confirmed your order will move to the final stages of processing. Most orders ship directly through the manufacturer. Processing takes up to two working days after your account is approved for dispatch. After this point, please allow up to 8-10 working days for your order to be delivered. We will email and SMS you at every stage of the order progression.
</td>
</tr>
<tr class="fw">
<td class="fw" colspan="2" style="padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 1.4em;font-weight: bold;">Download your application receipt</span>
<br><img src="http://meetbryce.com/client-files/mim/pdf.png" alt=" " align="left" border="0">
<span class="red strong" style="color: #fa696e;font-weight: bold;">contract-ord587fd27-1695-4a7e-8562-873ce4f087b6.pdf</span><br>
<strong>1206k</strong> <a href="#" target="_blank">View</a> <a href="#" target="_blank">Download</a>
</td>
</tr>
<tr class="hw">
<td class="fw" bgcolor="#f1f1f0" style="padding: 25px 25px 25px 25px;">
<img src="http://meetbryce.com/client-files/mim/footer-logo.png" alt="Make it Mine copyright © 2012 make it mine.<br>all rights reserved" align="left" border="0">
</td>
<td class="fw" bgcolor="#f1f1f0" style="padding: 25px 25px 25px 25px;">
<a href="#"><img src="http://meetbryce.com/client-files/mim/footer-facebook.png" alt="We like you… do you like us?" border="0"></a>
</td>
</tr>
</table>
<!-- end main content table -->
</td>
<td width="auto"></td>
</tr>
</tbody>
</table>
</body>
Upvotes: 3
Related Questions
- font-size email mobile is too small
- iPhone Mail resizing images/div in html email
- On iPhone 6 (and probably others) my simple HTML emails are display with stupidly large font
- HTML Email Fonts Not Scaling in Mail App on iPhone
- Increasing font size for html email on mobile
- css font-size is smaller in apple mail than gmail (iphone)
- -webkit-text-size-adjust: 100% doesn't work on iphone
- Issue stopping iPhone resizing HTML e-mails
- css controling font size in HTML EMAILS
- Why does font-size CSS not work on iPad HTML emails?