iOS 10 Mail HTML not responding correctly - html

I am creating a newsletter and I discovered strange behavior.
I have a table with 2 inside and I want them to be a block and 100% width but following happens:
it also breaks some other parts of the mail. I tried already so much... every viewport, max-width, min-width, I have no idea what to do...
I verified, media queries are working
Are there some special hacks I need?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" style="box-sizing: border-box;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" /> <meta name=”x-apple-disable-message-reformatting” />
<meta property="og:title" content="*|MC:SUBJECT|*">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">.inhalt li a {line-height:26px;}</style>
<style type="text/css">
body {
font-family: "Helvetica", "Arial";
}
img {
margin: 0; padding: 0; border: none;
}
body {
color: #000000; z-index: -3; font-family: "Helvetica", "Arial";
}
#media only screen and (max-width: 599px) {
table[yahoo] {
display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important;
}
.yahoo {
display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important;
}
.desktop {
display: none !important; height: 0px !important; max-height: 0 !important; line-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all;
}
[desktop] {
display: none !important; height: 0px !important; max-height: 0 !important; line-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all;
}
.mobile {
height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
}
[mobile] {
height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
}
.mobileshow_inlineblock {
height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
}
[mobileshow_inlineblock] {
height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
}
.mobile {
display: block !important;
}
[mobile] {
display: block !important;
}
.mobileshow_inlineblock {
display: inline-block !important;
}
[mobileshow_inlineblock] {
display: inline-block !important;
}
.hidden {
display: none !important;
}
.mblock {
position: relative; display: table-row !important;
}
.mblock > tr {
display: block; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
}
.mblock > tr > td {
display: block; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
}
.underlined {
text-decoration: underline !important;
}
.mcol {
width: 100% !important; padding: 0 20px !important;
}
.halfcol {
width: 120px !important;
}
.prehead td {
height: 66px !important;
}
.logo {
width: 115px !important; height: 26px !important;
}
.preheadtxt {
font-size: 8px !important; line-height: 11px !important;
}
.header_image {
width: 100% !important; max-width: 100% !important; height: auto !important;
}
.headertxt {
font-size: 16px !important; line-height: 24px !important;
}
.inhalttitle {
font-size: 28px !important; line-height: 36px !important;
}
.inhaltlinks a {
font-size: 16px !important; line-height: 24px !important; text-decoration: none !important;
}
.teaser {
width: 100% !important; max-width: 100% !important; min-width: 100% !important;
}
.pretitle {
font-size: 16px !important; line-height: 20px !important;
}
.teasertitle {
font-size: 28px !important; line-height: 36px !important;
}
.posttitle {
font-size: 16px !important; line-height: 20px !important;
}
.teasertxt {
font-size: 16px !important; line-height: 24px !important;
}
.mcol_teaser_1_pic {
width: 100% !important; text-align: right;
}
.mcol_teaser_2_pic {
width: 100% !important; padding-bottom: 20px !important;
}
.teaserpic {
height: auto !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
}
.smallteaserlink {
font-size: 22px !important;
}
.smallteaserpic {
max-width: 100% !important; width: 100% !important; height: auto !important;
}
.footer .mcol a {
text-decoration: underline !important;
}
.footer_leftpart {
font-size: 16px !important; line-height: 34px !important;
}
.footer_rightpart {
text-align: left !important;
}
.footer_copyright {
width: 280px !important; padding: 0 20px !important; text-align: left; position: absolute; top: 100%; left: 0;
}
.type1 {
font-size: 16px !important; line-height: 34px !important;
}
.type2 {
font-size: 16px !important; line-height: 24px !important;
}
}
</style>
</head>
<body bgcolor="#D8D8D8" style="box-sizing: border-box; font-family: 'Helvetica', 'Arial'; color: #000000; z-index: -3; margin: 0; padding: 0;">
<table bgcolor="#FFFFFF" class="body" cellspacing="0" cellpadding="0" yahoo="1" style="box-sizing: border-box; border-collapse: collapse; font-size: 0; width: 600px; margin: 0 auto; padding: 0; border: none;">
<tr style="box-sizing: border-box;">
<td align="left" valign="top" cellspacing="0" cellpadding="0" mainwrap style="box-sizing: border-box; margin: 0; padding: 0;">
<!-- // Begin Template teasertype2 \\ -->
<table yahoo width="600" class="mblock teaser teaser_2 yahoo" bgcolor="#ffffff" style="box-sizing: border-box; border-collapse: collapse; font-size: 0; width: 600px; margin: 0; padding: 0; border: none;">
<tr style="box-sizing: border-box;">
<td width="260" class="mblock mcol" align="left" valign="top" style="box-sizing: border-box; margin: 0; padding: 0;">
<div class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
LEFT
</div>
</td> <td width="260" class="mblock mcol" align="left" valign="top" style="box-sizing: border-box; margin: 0; padding: 0;">
<div class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
RIGHT
</div>
</td>
</tr>
</table>
<!-- // End Template teasertype2 \\ -->
<!--[if !mso]><!-->
<!--<![endif]-->
</td>
</tr>
</table>
</body>
</html>
The current problem:
iOS 10 not accepting "display: block;" on "td" tags


I’m not able to tell exactly where your issue occurs, but can see a lot of duplication in the supplied code above. There could be a collision, specificity issue, or iOS Mail just getting confusing and throwing a vital CSS rule out.
Here is a simplified example of a 600px wide email with two even columns that stack. I did not include most of the CSS (not relevant to this issue) and much of the surrounding HTML. I also removed the orphaned <!--[if !mso]><!--><!--<![endif]--> at the end.
CSS to go in the <head>:
<style>
#media screen and (max-width: 600px) {
.mblock {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
}
</style>
And HTML:
<!-- // Begin Template teasertype2 \\ -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
<tr>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:300px; vertical-align:top;" class="mblock">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
LEFT
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:300px; vertical-align:top;" class="mblock">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
RIGHT
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!-- // End Template teasertype2 \\ -->
This technique uses the hybrid approach, which uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway (hence the <!--[if !mso]> stuff). Media queries can enhance the email further in clients that support it, such as iOS Mail.
Edit: Additional doctype and meta info:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
</head>


Try using [class="classname"] for both table and table td.
table[class="mblock"],
table td[class="mblock"] {
width: 100% !important;
display: block !important;
}
In actual fact this will work as well by just targeting td;
td[class="mblock"] {
width: 100% !important;
display: block !important;
}
Alternate Method to Media Query
I am assuming some kind of transformation (such as; MS Word ML) on your original styles in the header.
An alternative method that is fairly bullet proof for almost (if not) all is called the Fab Four Technique it does not rely on media queries which means you get you're adaptive layout in clients that do not support it; such as; Outlook and Gmail.
JS Fiddle Here
Article on Medium
Example on Litmus

Related

Issues with the CSS in this email for Apple mail IOS 16

Ive been working on this mailer for a few months now - im not a coder but was able to use some pre designed templates and add in the additional requirements for outlook, gmail and Apple mail. However when I go to test the mailer it is appearing like this on mobile Apple mail enter image description here
I feel like ive tried eveything to get this fixed. Ive included my code below. If anyone has ideas on how to fix this - im all ears! The code was created in Dreamwaver and then moved over to our CRM system.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-UA-compatible" content="IE=edge">
<title>EmailTemplate-Responsive</title>
</head>
<style>
{-webkit-text-size-adjust: none}
</style>
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: 170px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: inline !important;
width: 33.3% !important;
max-width: 100% !important;
direction: ltr !important;
}
.stack-text-column-center {
display: inline !important;
width: 50% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: left !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: left !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
p.caption {
position: absolute !important;
bottom: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
left: 0 !important;
right: 0 !important;
text-align: center !important;
}
}
</style>
<style type="text/css">
#outlook body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 0px;
}
li {
text-align: -webkit-match-parent !important;
display: list-item important;
}
ul {
margin-top: 0px !important;
margin-bottom: 0 !important;
}
p.bullet {
Margin: 5px 0px 0px 10px !important;
text-indent: -10px !important;
}
</style>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td>
<center style="width: 100%;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
Fall 2022 update from Castle Peak Associates . </div>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center; border:0"> <img src="https://castlepeakassociates.com/wp-content/uploads/2021/06/Castle-Peak-Associates-Logo.png">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FEF4EA" width="600" class="email-container">
<tr>
<td class="full-width-image"><img src="https://castlepeakassociates.com/wp-content/uploads/2022/12/4e87912b-27f6-440b-9a83-d44547f3cffd.png" width="600" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<tr>
<td background="https://castlepeakassociates.com/wp-content/uploads/2022/09/CPA-page-bg-600px-.png" backgound-repeat:no-repeat background-size: contain style="padding-bottom: 10px;padding-left: 10px;padding-right:10px; text-align: center; font-family: sans-serif; font-size: 18px; mso-height-rule: exactly; line-height: 20px; color: #555555;background-color:#FEF4EA;">
<p style="font-size: 18px;padding:20px 0px 10px 0px;">What is on your horizon?
</p><p style="font-size: 13px;padding-bottom: 16px;">The Insurance industry is no stranger
to uncertainty. How are you affected by current events? What are the business
priorities and opportunities moving forward? Castle Peak Associates have decades of
experience helping Insurance companies navigate in challenging terrain. We conduct
strategic assesments, provide recommendations based on real world experience and
have a succesful track record of helping our clients implement our recommendations
and achieve their goals.</p>
<p style="font-size: 13px;padding-bottom: 16px;">We specialize in investment systems and
managment consulting for insurance companies. We understand what drives investment
decisions, what is required for regulatory and financial reporting and we understand
the complex network of platforms, data and processes that link the two.</p>
<p style="font-size: 13px;padding-bottom: 16px;"> Find out how we can help you and your
business succeed.</p>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr style="background-color:#003a70 !important">
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="mailto:chris.spurrell#castlepeakassociates.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
Contact Us
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #FEF4EA; !important">
<td align="center" style="padding: 10px 10px 10px 10px; background-color:#FEF4EA">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" valign="top" width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="bottom" width="170" height="170" style="min-width: 100%; min-height: 100%; align:center; position:relative; text-align:center; font-family:sans-serif;font-weight: bold;font-size: 22px; color:#000099;padding: 0px 10px 10px 10px;" class="center">
<img src="https://castlepeakassociates.com/wp-content/uploads/2022/12/Castle-Peak-Associates-Logo-1-1-e1671466265911.png">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:20px 10px 10px 10px; text-align: center;" class="stack-text-column-center center-on-narrow">
<p style="font-size: 16px;padding:0px 0px 10px 0px;">WHO...ARE
OUR CLIENTS?</p>
<p style="font-size: 15px;padding:0px 0px 10px 0px;">We work
with institutional asset owners and managers including:</p>
<p class="bullet">• Insurers</p>
<p class="bullet">• Pension Funds</p>
<p class="bullet">• Banks</p>
<p class="bullet">• Advisors</p>
<p class="bullet">• Service Providers</p>
<p class="bullet">• Fund Administrators</p>
<p style="padding:10px 0px 0px 0px;">Much of our recent work has
been with large, complex insurers with investment mandates
extending into alternatives, mortgage loans, private credit
and derivatives.</p>
</td>
</tr>
</table>
</td>
</tr></table>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">
View as a Web Page</webversion>
<br>
<br>
Castle Peak Associates, LP<br>
<span class="mobile-link--footer">2020 N Main St., Unit 239 Los Angeles,
CA</span> <br>
<br>
<unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe
</unsubscribe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>type here
Iv tried switching out the header tags, searched to see if I was missing a closing tag, and tried my best to make sure all the media quaries matched up.

The logo looks fine in codepen but is too big in outlook (email template)

I have an email template (HTML with inline CSS), the template has a logo with a fixed width and height (px). For some reason, after I received an email with this template, the logo took up the entire width of the page. I tried to add!Important in width and height properties, but it doesn't work.
It looks right in editor, but not in outlook.
What could be the problem and how can I fix it?
Here is the code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>New Assignment</title>
<style type="text/css">
/* reset */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block
}
.logo {
width: 200px !important;
height: 200px !important;
margin: 0 auto;
margin-bottom: 20px;
-webkit-filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));
filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden] {
display: none
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
html,
button,
input,
select,
textarea {
font-family: sans-serif
}
body {
margin: 0
}
a:focus {
outline: thin dotted
}
a:active,
a:hover {
outline: 0
}
h1 {
font-size: 2em;
margin: 0 0.67em 0
}
h2 {
font-size: 1.5em;
margin: 0 0 .83em 0
}
h3 {
font-size: 1.17em;
margin: 1em 0
}
h4 {
font-size: 1em;
margin: 1.33em 0
}
h5 {
font-size: .83em;
margin: 1.67em 0
}
h6 {
font-size: .75em;
margin: 2.33em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: bold
}
blockquote {
margin: 1em 40px
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
p,
pre {
margin: 1em 0
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word
}
q {
quotes: none
}
q:before,
q:after {
content: '';
content: none
}
small {
font-size: 75%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
dl,
menu,
ol,
ul {
margin: 1em 0
}
dd {
margin: 0 0 0 40px
}
menu,
ol,
ul {
padding: 0 0 0 40px
}
nav ul,
nav ol {
list-style: none;
list-style-image: none
}
img {
border: 0;
-ms-interpolation-mode: bicubic
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
form {
margin: 0
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle
}
button,
input {
line-height: normal
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible
}
button[disabled],
input[disabled] {
cursor: default
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
textarea {
overflow: auto;
vertical-align: top
}
table {
border-collapse: collapse;
border-spacing: 0
}
/* custom client-specific styles including styles for different online clients */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* hotmail / outlook.com */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* hotmail / outlook.com */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Outlook */
#outlook a {
padding: 0;
}
/* Outlook */
img {
-ms-interpolation-mode: bicubic;
display: block;
outline: none;
text-decoration: none;
}
/* IExplorer */
body,
table,
td,
p,
a,
li,
blockquote {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-weight: normal !important;
}
.ExternalClass td[class="ecxflexibleContainerBox"] h3 {
padding-top: 10px !important;
}
/* hotmail */
/* email template styles */
h1 {
display: block;
font-size: 26px;
font-style: normal;
font-weight: normal;
line-height: 100%;
}
h2 {
display: block;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 120%;
}
h3 {
display: block;
font-size: 17px;
font-style: normal;
font-weight: normal;
line-height: 110%;
}
h4 {
display: block;
font-size: 18px;
font-style: italic;
font-weight: normal;
line-height: 100%;
}
.flexibleImage {
height: auto;
}
table[class=flexibleContainerCellDivider] {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
body,
#bodyTbl {
background-color: #E1E1E1;
}
#emailHeader {
background-color: #E1E1E1;
}
#emailBody {
background-color: #FFFFFF;
}
#emailFooter {
background-color: #E1E1E1;
}
.textContent {
color: #8B8B8B;
font-family: Helvetica;
font-size: 16px;
line-height: 125%;
text-align: Left;
}
.textContent a {
color: #205478;
text-decoration: underline;
}
.emailButton {
background-color: #205478;
border-collapse: separate;
}
.buttonContent {
color: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
line-height: 100%;
padding: 15px;
text-align: center;
}
.buttonContent a {
color: #FFFFFF;
display: block;
text-decoration: none !important;
border: 0 !important;
}
#invisibleIntroduction {
display: none;
display: none !important;
}
/* hide the introduction text */
/* other framework hacks and overrides */
span[class=ios-color-hack] a {
color: #275100 !important;
text-decoration: none !important;
}
/* Remove all link colors in IOS (below are duplicates based on the color preference) */
span[class=ios-color-hack2] a {
color: #205478 !important;
text-decoration: none !important;
}
span[class=ios-color-hack3] a {
color: #8B8B8B !important;
text-decoration: none !important;
}
/* phones and sms */
.a[href^="tel"],
a[href^="sms"] {
text-decoration: none !important;
color: #606060 !important;
pointer-events: none !important;
cursor: default !important;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: none !important;
color: #606060 !important;
pointer-events: auto !important;
cursor: default !important;
}
/* responsive styles */
#media only screen and (max-width: 480px) {
body {
width: 100% !important;
min-width: 100% !important;
}
table[id="emailHeader"],
table[id="emailBody"],
table[id="emailFooter"],
table[class="flexibleContainer"] {
width: 100% !important;
}
td[class="flexibleContainerBox"],
td[class="flexibleContainerBox"] table {
display: block;
width: 100%;
text-align: left;
}
td[class="imageContent"] img {
height: auto !important;
width: 100% !important;
max-width: 100% !important;
}
img[class="flexibleImage"] {
height: auto !important;
width: 100% !important;
max-width: 100% !important;
}
img[class="flexibleImageSmall"] {
height: auto !important;
width: auto !important;
}
table[class="flexibleContainerBoxNext"] {
padding-top: 10px !important;
}
table[class="emailButton"] {
width: 100% !important;
}
td[class="buttonContent"] {
padding: 0 !important;
}
td[class="buttonContent"] a {
padding: 15px !important;
}
}
</style>
<!--
MS Outlook custom styles
-->
<!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
<!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
</head>
<body bgcolor="#E1E1E1" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center style="background-color:#E1E1E1;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTbl" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#E1E1E1" border="0" cellpadding="0" cellspacing="0" width="500" id="emailHeader">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td valign="top" width="500" class="flexibleContainerCell">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="middle" id="invisibleIntroduction" class="flexibleContainerBox" style="display:none;display:none !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<div style="font-family:Helvetica,Arial,sans-serif;font-size:13px;color:#828282;text-align:center;line-height:120%;">
Project Template
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="500" id="emailBody">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#FFFFFF;" bgcolor="#009999">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="500" class="flexibleContainerCell">
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="textContent">
<img class="logo" style="width: 200px !important; height: 200px !important; margin: 0 auto; margin-bottom: 20px; -webkit-filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));
filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg" alt="Logo">
<h1 style="color:#FFFFFF;line-height:100%;font-family:Helvetica,Arial,sans-serif;font-size:35px;font-weight:normal;margin-bottom:5px;text-align:center;"> {{pageName}} New Joiner </h1>
<h2 style="text-align:center;font-weight:normal;font-family:Helvetica,Arial,sans-serif;font-size:23px;margin-bottom:10px;color:#FCC310;line-height:135%;">{{userName}}</h2>
<div style="text-align:center;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;color:#FFFFFF;line-height:135%;">{{userName}} wants to join your page.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="500" class="flexibleContainerCell">
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3 style="color:#5F5F5F;line-height:125%;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:normal;margin-top:0;margin-bottom:3px;text-align:left;">{{userName}}</h3>
<div style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;margin-top:3px;color:#5F5F5F;line-height:135%;">Hi! I would like to join your page {{pageName}}! Please accept my request.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F8F8F8">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="500" class="flexibleContainerCell">
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="50%" class="emailButton" style="background-color: #009999;">
<tr>
<td align="center" valign="middle" class="buttonContent" style="padding-top:15px;padding-bottom:15px;padding-right:15px;padding-left:15px;">
<a style="color:#FFFFFF;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:135%;" href="{{link}}" target="_blank">Open Request</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- footer -->
<table bgcolor="#E1E1E1" border="0" cellpadding="0" cellspacing="0" width="500" id="emailFooter">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="500" class="flexibleContainerCell">
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td valign="top" bgcolor="#E1E1E1">
<div style="font-family:Helvetica,Arial,sans-serif;font-size:13px;color:#828282;text-align:center;line-height:120%;">
<div>Copyright © 2022. All rights reserved.</div>
<div>You can also see your notifications in the <span style="color:#828282;">Application</span></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // end of footer -->
</td>
</tr>
</table>
</center>
</body>
</html>

Welcome to email!
Outlook looks to the width and height attributes, rather than the inline styles. So you don't need !important, either.
<img class="logo" width="200" height="200" <!-- added attributes -->
style="width: 200px !important; height: 200px !important; margin: 0 auto;
remove those !importants. Outlook will generally remove anything with !important inline, not that that matters for this case.
margin-bottom: 20px; -webkit-filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));
it's important to note that Outlook sticks to the original design for HTML elements, so img is inline, and margins won't work. Wrap it in a <p> and put the margin on that, or use padding on the <td>
filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));"
This should be considered a progressive enhancement, as it will only work on some email clients. https://www.caniemail.com is you best friend, i.e. https://www.caniemail.com/features/css-filter/
src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Instagram_logo_2016.svg"
SVG support is limited. Use a PNG. See https://www.caniemail.com/features/html-svg/
Many email programs will, in general, only use HTML4 and CSS2, but you may use later technology for improving experience in clients like Apple Mail--as long as you have a fallback.

How do I center a background image in my email header?

I'm working on an HTML email and I'm running into a few blockers. I can't figure out how to center the image header or how to change the opacity of the background image.
I've tried multiple different class movements and dabbled with the CSS but to no success. I've attached a mockup of how it should look (the height should be desktop height)
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NASCAR Fan Email</title>
<style>
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#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 style=" font-family: sans-serif; -webkit-font-smoothing: antialiased; line-height: 2.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="imageheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This
is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 800px; padding: 10px; width: 800px; margin: 0 auto;" width="800" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 800px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png'); width: 100%; background-repeat: no-repeat; padding: 50px 0px 50px 0px; border-bottom: 10px solid red;" width="100%">
<table role="presentation" class="main" style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg'); width: 100%; background-repeat: no-repeat; padding: 60px;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Hello,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<p class="targetlink">
<!-- <a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a></p> -->
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase; text-decoration: none;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>

You can't have background images in emails with text on top, here is why:
First of all to center the background you can use (see snippet)
background-position: center center;
and to add opacity you can do things like
opacity:0.5
or
background-color:rgba(0, 0, 0, 0.5)
Although none of the previous will work on a background, you would need to add it as an image and then position it absoulute behinde the text. And here comes the greatest problem.
Emails are a complicated things to code because of compatibilty issues, for instance, your css styles might not work because some email clients are not compatible with <style>, as well as media queries, or even styles like opacity.
It is recommended that all CSS is inline and work strictly with tables, (which you already do, great!). But when it comes to images, images must be as <img/> and not css background, because many email clients will not show the image, and that's why you can't have text on top of them. It is true that you can use position absolute as I said before, but css positining is not compatible with emals.
That's why, see all the promotional emails that you get and none of them uses background images.
Another tip: make sure your html has no errors, or many email clients like gmail will consider it as spam. For instance I noticed that you have a <table> followed by another <table>, when you must have <table><tr></td> or <th> and then another <table> (also don't foget of <tbody> )
I found a great comaptibility gude:
https://www.campaignmonitor.com/css/
Good luck!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NASCAR Fan Email</title>
<style>
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#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 style=" font-family: sans-serif; -webkit-font-smoothing: antialiased; line-height: 2.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="imageheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This
is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 800px; padding: 10px; width: 800px; margin: 0 auto;" width="800" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 800px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png'); width: 100%; background-repeat: no-repeat; background-position: center center;padding: 50px 0px 50px 0px; border-bottom: 10px solid red; background-position: center center;" width="100%">
<table role="presentation" class="main" style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg'); width: 100%; background-repeat: no-repeat; padding: 60px;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Hello,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<p class="targetlink">
<!-- <a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a></p> -->
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase; text-decoration: none;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>

iPhone resizing HTML emails

I'm building HTML responsive emails and everything looks good, except iPhone/iOS Mail app. It renders my email with some kind of zoom out, seems like it's rendering as desktop. But this only happens if I copy/paste my rendered HTML (get the HTML, save it, open in browser, select everything and copy) in an email client like Gmail. If I get that same HTML code and send through an email client that supports HTML stuff, everything looks good.
Some things I've already tried:
<body style="-webkit-text-size-adjust:none;">
<meta name="viewport" content="width=device-width, maximum-scale=1,
minimum-scale=1, user-scalable=no"/>
Removing table-layout: fixed;
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title></title>
<style type="text/css">
table,
td {
color: #000000;
}
#media only screen and (min-width: 520px) {
.row {
width: 500px !important;
}
.row .col {
vertical-align: top;
}
.row .col-100 {
width: 500px !important;
}
}
#media (max-width: 520px) {
.row-container {
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.row .col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
.row {
width: calc(100% - 40px) !important;
}
.col {
width: 100% !important;
}
.col > div {
margin: 0 auto;
}
}
body {
margin: 0;
padding: 0;
}
table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}
p {
margin: 0;
}
.ie-container table,
.mso-container table {
table-layout: fixed;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors='true'] {
color: inherit !important;
text-decoration: none !important;
}
</style>
</head>
<body
class="clean-body"
style="
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
background-color: #ffffff;
color: #000000;
"
>
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
style="
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-color: #ffffff;
width: 100%;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr style="vertical-align: top">
<td
style="
word-break: break-word;
border-collapse: collapse !important;
vertical-align: top;
"
>
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #ffffff;"><![endif]-->
<div
class="row-container"
style="padding: 0px; background-color: transparent"
>
<div
class="row"
style="
margin: 0 auto;
min-width: 320px;
max-width: 500px;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
background-color: transparent;
"
>
<div
style="
border-collapse: collapse;
display: table;
width: 100%;
background-color: transparent;
"
>
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:500px;"><tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="500" style="width: 500px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div
class="col col-100"
style="
max-width: 320px;
min-width: 500px;
display: table-cell;
vertical-align: top;
"
>
<div style="width: 100% !important">
<!--[if (!mso)&(!IE)]><!--><div
style="
padding: 0px;
border-top: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-bottom: 0px solid transparent;
"
><!--<![endif]-->
<table
style="font-family: arial, helvetica, sans-serif"
role="presentation"
cellpadding="0"
cellspacing="0"
width="100%"
border="0"
>
<tbody>
<tr>
<td
style="
overflow-wrap: break-word;
word-break: break-word;
padding: 10px;
font-family: arial, helvetica, sans-serif;
"
align="left"
>
<div
style="
line-height: 140%;
text-align: left;
word-wrap: break-word;
"
>
<p style="font-size: 14px; line-height: 140%">
<span
style="
font-size: 18px;
line-height: 25.2px;
"
>Prescribing information for XIRION ▼ and
adverse event reporting details can be
found here</span
>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
</html>

Fluid two column table layout that won't position tables side-by-side

Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>

the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>