Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Neil Anuskiewicz
11,007 PointsHTML email looks good in all but Android
I took the excellent HTML Email Design course and tested the final result using Litmus. The email rendered well in everything except for Android. Specifically, the email doesn't stack the columns as it did with the other devices. The email also looked great in desktop email clients. Any ideas on how to fix the email so it looks good on an Android, too? Maybe Android makes it impossible to solve this problem? Here's the HTML and CSS.
<!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">
<title>square gallery | Newsletter</title>
<!--
This email is based on the idea that the most common design
patterns seen in email can be placed in modular blocks and
moved around to create different designs.
The same principle is used to build the email templates in
MailChimp's Drag-and-Drop email editor.
This email is optimized for mobile email clients, but does not
support the Android of iOS Gmail App, which do not support
Media Queries.
For more information on HTML email design and development,
visit http://templates.mailchimp.com
-->
<style type="text/css">
/*
Except for the reset, client-specific, and media query
styles, all CSS in this email has been inlined. It can be
tedious to adjust email styling when inlining has been done,
so it's easier to write all CSS in the head, then use
a CSS inliner to inline the styles once you've finished.
MailChimp provides a stand-alone CSS inliner at
http://beaker.mailchimp.com/inline-css
*/
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin: 1em 0;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// MOBILE STYLES //////*/
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
@media only screen and (max-width: 480px){
/*////// RESET STYLES //////*/
td[id="introductionContainer"], td[id="callToActionContainer"], td[id="eventContainer"], td[id="merchandiseContainer"], td[id="footerContainer"]{padding-right:10px !important; padding-left:10px !important;}
table[id="introductionBlock"], table[id="callToActionBlock"], table[id="eventBlock"], table[id="merchandiseBlock"], table[id="footerBlock"]{max-width:480px !important; width:100% !important;}
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/*////// GENERAL STYLES //////*/
h1{font-size:34px !important;}
h2{font-size:30px !important;}
h3{font-size:24px !important;}
img[id="heroImage"]{height:auto !important; max-width:520px !important; width:100% !important;}
td[class="introductionLogo"], td[class="introductionHeading"]{display:block !important;}
td[class="introductionHeading"]{padding:40px 0 0 0 !important;}
td[class="introductionContent"]{padding-top:20px !important;}
td[class="callToActionContent"]{text-align:left !important;}
table[class="callToActionButton"]{width:100% !important;}
td[id="eventBlockCell"]{padding-right:20px !important; padding-left:20px !important;}
table[class="eventBlockCalendar"]{width:100px !important;}
td[id="merchandiseBlockCell"]{padding-right:20px !important; padding-left:20px !important;}
td[class="merchandiseBlockHeading"] h2{text-align:center !important;}
td[class="merchandiseBlockLeftColumn"], td[class="merchandiseBlockRightColumn"]{display:block !important; padding:0 0 20px 0 !important; width:100% !important;}
td[class="footerContent"]{font-size:15px !important;}
td[class="footerContent"] a{display:block;}
}
</style>
</head>
<body style="margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #424145;height: 100%;width: 100%;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;background-color: #424145;height: 100%;width: 100%;">
<tr>
<td align="center" valign="top" id="bodyCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;height: 100%;width: 100%;">
<!-- // BEGIN EMAIL -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="emailContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width: 100%;">
<tr>
<td align="center" valign="top" id="heroImageContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;">
<!-- // BEGIN HERO BLOCK -->
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/in_the_conservatory.jpg" alt="In The Conservatory, by Édouard Manet" height="415" width="520" id="heroImage" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
<!-- END HERO BLOCK // -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="introductionContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;padding: 40px;">
<!-- // BEGIN INTRO BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="introductionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;">
<tr>
<td style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" class="introductionLogo" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/logo.2.png" alt="square gallery" height="165" width="150" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"></a>
</td>
<td align="left" valign="middle" class="introductionHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #808080;font-size: 14px;font-weight: bold;line-height: 150%;padding-left: 40px;">
presents
<br>
<h1 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #D83826;font-size: 44px;font-weight: 100;line-height: 115%;text-align: left;">The Works of Édouard Manet</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="introductionContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 18px;line-height: 150%;padding-top: 40px;">
Starting on October 12th and running for three weeks, square gallery is proud and excited to display a selection of 6 pieces of the work of Édouard Manet, the French master painter of the great Impressionist and Realist movements of the 17th century.
</td>
</tr>
</table>
<!-- END INTRO BLOCK // -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="callToActionContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #D83826;padding: 40px;">
<!-- // BEGIN CALL-TO-ACTION BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #D83826;">
<tr>
<td align="center" valign="top" class="callToActionContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 16px;line-height: 150%;padding-bottom: 40px;text-align: center;">
<h3 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 30px;font-weight: 100;line-height: 115%;text-align: center;">The Works of Édouard Manet:<br>A Live Tour With Clémence Rousseau</h3>
<br>
Friday nights at 8:00PM throughout the exhibition, French art critic and Manet expert Clémence Rousseau will be examining the 6 pieces featured, providing deep insights into Manet’s genius and his beautiful artwork. Register early, as space is limited.
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;border-radius: 4px;box-shadow: 0 5px 0 #A22A1C;">
<tr>
<td align="center" valign="top" class="callToActionButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;color: #D83826;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">Register Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- //END CALL-TO-ACTION BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="eventContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;padding: 40px;">
<!-- // BEGIN EVENT BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="eventBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;border-top: 1px solid #BBBBBB;border-bottom: 1px solid #BBBBBB;">
<tr>
<td align="center" valign="top" id="eventBlockCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="left" valign="top" class="eventBlockHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-bottom: 40px;">
<h2 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 34px;font-weight: 100;line-height: 100%;text-align: left;">Upcoming Events</h2>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="110" class="eventBlockCalendar" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border: 1px solid #DDDDDD;">
<tr>
<td align="center" valign="top" class="eventBlockMonth" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #D83826;color: #FFFFFF;font-size: 18px;font-weight: bold;line-height: 100%;padding: 10px;">
NOV
</td>
</tr>
<tr>
<td align="center" valign="top" class="eventBlockDay" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #FFFFFF;color: #404040;font-size: 48px;font-weight: bold;line-height: 100%;padding: 15px;">
7
</td>
</tr>
</table>
</td>
<td align="left" valign="top" class="eventContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 125%;padding-left: 20px;">
<h3 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #D83826;font-size: 30px;font-weight: 100;line-height: 115%;text-align: left;">localArTLanta</h3>
<strong>Running November 7 through December 14</strong>
<br>
An exhibition of Atlanta’s finest local artists in a broad selection of media ranging from painting to sculpture to perfomance art.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END EVENT BLOCK // -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="merchandiseContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F0F0F0;padding-right: 40px;padding-bottom: 40px;padding-left: 40px;">
<!-- // BEGIN MERCHANDISE BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="merchandiseBlock" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border: 1px solid #BBBBBB;border-radius: 4px;">
<tr>
<td align="center" valign="top" id="merchandiseBlockCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="left" valign="top" class="merchandiseBlockHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-bottom: 40px;">
<h2 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 34px;font-weight: 100;line-height: 100%;text-align: left;">Support square gallery</h2>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;">
<!-- //BEGIN MERCHANDISE ITEM -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/berthe_morisot.png" height="150" width="110" class="merchandiseImage" style="border: 1px solid #DDDDDD;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px;">
Art Print:
<br>
<strong>Berthe Morisot With A Bouquet Of Violets</strong>
<br>
11”x7” - $29.99
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #D83826;border-radius: 4px;box-shadow: 0 5px 0 #A22A1C;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">Purchase</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END MERCHANDISE ITEM // -->
</td>
<td align="center" valign="top" width="50%" class="merchandiseBlockRightColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-left: 10px;">
<!-- //BEGIN MERCHANDISE ITEM -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/logo_tshirt.png" height="150" width="110" class="merchandiseImage" style="border: 1px solid #DDDDDD;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px;">
T-Shirt:
<br>
<strong>square gallery Logo Tee</strong>
<br>
8 Sizes - $19.99
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #D83826;border-radius: 4px;box-shadow: 0 5px 0 #A22A1C;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">Purchase</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END MERCHANDISE ITEM // -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END MERCHANDISE BLOCK // -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 40px;">
<!-- // BEGIN FOOTER BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="footerBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" class="footerContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #AAAAAA;font-size: 13px;line-height: 150%;padding-bottom: 40px;">
<strong>As always, everyone at square gallery thanks you
<br>
for your support. We couldn’t exist without you.</strong>
</td>
</tr>
<tr>
<td align="center" valign="top" class="footerContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #AAAAAA;font-size: 13px;line-height: 150%;padding-bottom: 40px;">
© 2013 square gallery. • 1551 Peachtree Street NW • Atlanta, Georgia 30318
<br>
<br>
<a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;text-decoration: none;">unsubscribe from list</a> <a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;text-decoration: none;">set email preferences</a> <a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #D83826;text-decoration: none;">view in browser</a>
</td>
</tr>
</table>
<!-- END FOOTER BLOCK // -->
</td>
</tr>
</table>
<!-- END EMAIL // -->
</td>
</tr>
</table>
</center>
</body>
</html>
Manav Misra
11,778 PointsManav Misra
11,778 PointsSame thing here. I tested on Litmus via MailChimp. It was fine except for Android Mail. :(