So made a newsletter for a client, and just 1 slight little bug i have now on Outlook 2007,2010,2013,2016 assuming its cause these use Word as the rendering engine.
Basically i have a 2x2 grid each item being 50% so all sitting nice and snug but on outlook it looks like its either adding whitespace below the images or adding more padding to my text boxes (see screenshot)
Here is my HTML for that section:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="50%" background="#8f5470" bgcolor="#8f5470" style="padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
<h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we take care of every detail</h4>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Everything from design and planning through to manufacturing and installation, and where required assisting you to appoint a builder for the required preparatory works.</p>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are dedicated to making it as easy as possible for you.</p>
</td>
<td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/detail-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/benefits-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
<td width="50%" background="#0599a8" bgcolor="#0599a8" style=" padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
<h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we can offer benefits to our clients</h4>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">In conjunction with Barclays we are able to offer a number of financial solutions, helping our customers stay in control of their cash flow.</p>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">As members of the IBGCo we offer consumer protection at point of sale and throughout the ten year guarantee period. Providing total peace of mind.</p>
</td>
</tr>
</tbody>
</table>
Any help would be appreciated thanks in advance.
I have added mso-padding-alt: 0px 45px; to parent td of the text.
Here is the working fiddle.
https://jsfiddle.net/6LgcnLka/
I have attached the screenshot of the ouput in outlook 2013
Related
This is a confirmation email from a MailJet subscription widget. Problem is that the body goes too wide in Outlook but header is responsive and looks correct. I've tried a ton of things like fixed width, break word, etc to try and contain the body. I'm sure it is simple but I guess this is part of the learning journey! Any help is much appreciated!
<html><body><div class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
<tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr style="text-align: center; padding: 0 0 20px 0;">
<td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
<span class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-b">Please Confirm Your Subscription</b>
</span>
</td>
</tr>
<tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<data id="start-link"></data>
<div class="mj-opt-in-button mj-w-btn mockup-content paint-area" style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
<div style="display: table; height: 45px; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-b">CLICK HERE TO SUBSCRIBE</b></div>
</div>
</div>
</div>
<data id="end-link"></data>
</td>
</tr>
<tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-i" style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div></body></html>
The main problem here is that The Outlooks on Windows don’t support max-width (see Can I email for details). An easy solution is to add what’s usually referred to as a ghost table: a <table> within conditional comments specifically for Outlook.
Add the following right after the opening of your <body>:
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
And add the following right before the closing of your </body>:
<!--[if mso]>
</td></tr></table>
<![endif]-->
It also looks like the generated URL at the end of your email (seen in your screenshot but not in your code) is forcing your layout to expand. To prevent this, you can force the text to break on multiple lines by adding word-break:break-all; word-wrap:break-word; in the style of the maching <td>.
Here’s a full code example fixing these two issues (tested on Email on Acid):
<html><body>
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
<div class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
<tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr style="text-align: center; padding: 0 0 20px 0;">
<td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
<span class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-b">Please Confirm Your Subscription</b>
</span>
</td>
</tr>
<tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<data id="start-link"></data>
<div class="mj-opt-in-button mj-w-btn mockup-content paint-area" style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
<div style="display: table; height: 45px; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-b">CLICK HERE TO SUBSCRIBE</b></div>
</div>
</div>
</div>
<data id="end-link"></data>
</td>
</tr>
<tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px; word-break:break-all; word-wrap:break-word;"><div class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-i" style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]--></body></html>
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>
I've used an html email template and modified it but the email is displaying with a large white margin at the top. How to I reduce this? I'm using android mail client to receive mail and, between the head and top of the page (subject bar), there's too much margin (white space. I'd like to bring the whole thing up to the top of the page
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
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;
}
}
<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- 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;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<p style="font-family: sans-
serif; font-size: 14px;
font-weight: normal; margin:
0; Margin-bottom: 15px;">.
</p>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">.
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
Example of changes..
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-
family: sans-serif; font-size:
14px; vertical-align: top; box-
sizing: border-box; padding: 0
20px;">
<table border="0" cellpadding="0"
cellspacing="0" style="border.
collapse:
separate; mso-table-lspace: 0pt;
mso-table-rspace: 0pt; width:
100%;">
<tr>
<td style="font-family: sans-serif;
font-size: 14px; vertical-align:
top;">
<center><img
src="http://adsler.co.uk/wp--
content/uploads/2019/07/Ph
oto_1563667417091.png" alt="Useful
alt text" width="300" height="60"
border="0" style="border:0;
outline:none; text-decoration:none;
display:block;"><br><br></center>
Hey there and welcome to Adsler.
Just in case you didn't know, you
can also post ads for property,
jobs, items wanted or for sale,
motors, mobile phones and much
more.
<table border="0" cellpadding="0"
cellspacing="0" class="btn bt
You had a couple empty <p> tags above your header image and the surrounding <td> had a 20px padding.
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
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;
}
}
<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
0 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
I have an email signature which consists of a simple table (one row, two columns). The first column has a logo, the second column has all the contact details.
I would like to make it responsive so that on small devices the logo is shown above, and the contact details below (so effectively the columns turn into rows). Currently, on small devices, the table gets squeezed so that the contact details are not readable.
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<div class="m_159975109461180827gmail_signature">
<div dir="ltr">
<div dir="ltr">
<table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td>
<td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;">
<table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position • Name of the company</span></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a> <span style="color: #d2ac67;">m: </span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44 1</a>234567</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thank you all in advance for your help/guidance.
If you want to use a table create another table with your rows as columns and assign each table a class. Use css to hide and show the different tables using media calls.
I'm using Zurb Ink to create atemplate for the first time; it's great, but I cannot get my head around a certain problem.
Everything works fine when I view the HTML in my browser, but I'm unfortunately required to send my email through a sending platform which takes the liberty of adjusting the code I've written.
The problem I'm having is with image size. For some reason, an image I'm using, which is 580px wide, sizes itself to 576px when sent through the email platform. I have looked through the code repeatedly and checked around online but I can't find anything, so an help is VERY much appreciated.
<!--header row-->
<table class="row header-bar" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; background: #4480ba; padding: 0px;" bgcolor="#4480ba">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="nine sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 75%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 80%; float: left; clear: both; display: block; padding-left: 10px; padding-right: 10px; margin-left: 5px; margin-right: 5px;" class="text-pad alumni-logo" src="" alt="" width="237" height="80" align="left" />
</td>
<td class="three sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 25%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; margin: 0 auto;" class="center" src="http://www.jampaper.com/userFiles/productImages/tn_02561_Orange_6_1_2_x_6_1_2_Square_Envelopes.jpg" alt="" width="80" height="80" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/header row-->
<!--big image row-->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last intro-image" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; padding-top: 0 !important; margin: 0 auto;" class="center intro-image" src="http://www.nagelphotography.com/img/s2/v4/p176518365-3.jpg" alt="" width="580" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/big image row-->
I understand this might be a bit of a long shot but I really cannot figure out why this image is not 580px when the screen is wide enough to support it. For reference, at smaller sizes the problem persists, but the difference is a smaller number of pixels.
If anyone comes across this problem in the future - you may be interested to know that the reason the image was out of line was the expander cell below was taking up space, due to the fact that the character had been added by the email platform I was using. Normally in Ink expanders have no size at all.