I’m not sure what I’m missing here. I’ve went ahead and change my webkit text resize to none and that doesn’t help at all - so I put it back to 100%. Can someone tell me why the email looks fine in Gmail, Outlook, etc… but in iOS it looks different? It even looks ok on my iPad Pro but not my iPhone. Thanks in advance!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New AchieveCE Site Launch</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 12px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 12px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: none;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
/* font-size: 16px !important; */
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">New Website Coming September 28, 2020!</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> <br></td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p><a href="http://www.achievece.com" target="_blank" style="text-decoration: none;"><img src="https://achievece.academyofmine.net/wp-content/uploads/2020/04/footer-logo.png" alt="AchieveCE" width="200" height="50" border="0"></a></p>
</td>
</tr>
<tr>
<td>
<p><img src="https://www.dropbox.com/s/l3kn99nifcjn2e3/EMAIL%20BANNER-2.png?raw=1" alt="AchieveCE" width="580" border="0"></p>
</td>
</tr>
<tr>
<td>
<table width="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 0px; padding-bottom: 00px;">We've completely redesigned AchieveCE<br />and added new features<br />that will make your learning experience even better.</td>
</tr>
</table>
<hr>
<table width="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><font style="font-family: 'Comfortaa', sans-serif; font-size: 16px; color: #036cb0;"><strong>Cool New Features</strong></font><br /><font style="font-family: 'Comfortaa', sans-serif; font-size: 11px;">coming the week of September 28<sup>th</sup></font></td>
</tr>
</table>
<table width="100%" align="center" cellspacing="0" cellpadding="5" style="margin-top: 10px;">
<tr>
<td width="50%" align="center" style="padding-right: 10px;"><img src="https://www.dropbox.com/s/85ugesw7ktwcuy9/549%5B1%5D.jpg?raw=1" width="120"><br /><font style="font-family: 'Comfortaa', sans-serif; font-size: 13px; color: #424242;"><strong>Fresh, Modern Design</strong></font><br/>The new website now looks engaging, vibrant, and fun, much like the modern health professional!</td>
<td width="50%" align="center" style="padding-left: 10px;"><img src="https://www.dropbox.com/s/uwl3rha863nmj26/277%5B1%5D.jpg?raw=1" width="120"><br /><font style="font-family: 'Comfortaa', sans-serif; font-size: 13px; color: #424242;"><strong>Membership Offers</strong></font><br />As a member, you get an all-access 24/7 pass to all the courses available for your profession and more.</td>
</tr>
<tr>
<td width="50%" align="center" style="padding-right: 10px; padding-top: 30px;"><img src="https://www.dropbox.com/s/df9emj5er6kvgm9/496%5B1%5D.jpg?raw=1" width="120"><br /><font style="font-family: 'Comfortaa', sans-serif; font-size: 13px; color: #424242;"><strong>New Learning Platform</strong></font><br/>Our new learning platform is more flexible, which means more visually engaging courses are coming soon.</td>
<td width="50%" align="center" style="padding-left: 10px; padding-top: 30px;"><img src="https://www.dropbox.com/s/is3dsgbpmyz3pdi/185%5B1%5D.jpg?raw=1" width="190"><br /><font style="font-family: 'Comfortaa', sans-serif; font-size: 13px; color: #424242;"><strong>Updates in One Place</strong></font><br />News from your state board, professional association, and industry are kept in one, streamlined page for your convenience!</td>
</tr>
</table>
<table width="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 30px;"><font style="font-family: 'Comfortaa', sans-serif; font-size: 16px; color: #036cb0;"><strong>... and about a bazillion* more!</strong></font></td>
</tr>
</table>
<table width="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 20px; color: #a6a6a6;">* Well, maybe slightly less than a bazillion, but still, you know, a lot of new features.</td>
</tr>
</table>
<hr>
<table width="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 0px; font-size: 12px;">Keep your eyes open for an upcoming instructional email next week<br />and follow us on social media for news, updates, fun, and announcements.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<strong>CONNECT WITH US.</strong>
<a href="http://www.facebook.com/achieveceonline" style="text-decoration: none;" target="_blank" border="0"><img src="https://achievece.academyofmine.net/wp-content/uploads/2020/07/fbIcon.png" alt="Facebook" width="30" height="30" border="0"></a>
<a href="http://www.twitter.com/achievece" target="_blank" border="0" style="text-decoration: none;"><img src="https://achievece.academyofmine.net/wp-content/uploads/2020/07/twIcon.png" alt="Twitter" width="30" height="30" border="0"></a>
<a href="http://www.linkedin.com/company/achievece" style="text-decoration: none;" target="_blank" border="0"><img src="https://achievece.academyofmine.net/wp-content/uploads/2020/07/liIcon.png" alt="LinkedIn" width="30" height="30" border="0"></a>
<a href="https://www.youtube.com/channel/UCSntFbXLX-1u2EzHy1g7M1w" style="text-decoration: none;" target="_blank" border="0"><img src="https://achievece.academyofmine.net/wp-content/uploads/2020/07/ytIcon.png" alt="YouTube" width="30" height="30" border="0"></a>
<a href="http://www.instagram.com/achieveceonline" style="text-decoration: none;" target="_blank" border="0"><img src="https://achievece.academyofmine.net/wp-content/uploads/2020/07/igIcon.png" alt="Instagram" width="30" height="30" border="0"></a>
<!--<img src="C:/Users/joshu/Documents/AchieveCE/ptIcon.png" alt="Pinterest" width="30" height="30" border="0">
<img src="C:/Users/joshu/Documents/AchieveCE/tbIcon.png" alt="Tumblr" width="30" height="30" border="0">
<img src="C:/Users/joshu/Documents/AchieveCE/cebIcon.png" alt="CE Broker" width="30" height="30" border="0">-->
</td>
</tr>
<tr>
<td class="content-block">
<span class="apple-link">Ensure delivery of email communications. Add <a href="mailto:info@achievece.com">info@achievece.com</a> to your address book or safe list.<br><br><em>Copyright © 2020 AchieveCE, All rights reserved.</em><br><br><strong>MAILING ADDRESS</strong><br>AchieveCE | 4320 Deerwood Lake Pkwy #101-332 | Jacksonville, FL 32216<br><br>This email was sent to <a href="#">[Email]</a> because of an action taken at AchieveCE.com.
<br>Don't like these emails? <a href="http://#">Unsubscribe</a>.</span>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>```