Replied to Discussion: Outlook App vs. Dark Mode on iOS - A disaster by Lee Borowiak
Hi Hans,
Have you tried using @media prefers-color-scheme: dark
<style type="text/css">
@media (prefers-color-scheme: dark) {
.mycolour {
background:#cccccc !important;
}
}
</style>
See more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Thanks,
Lee.
Replied to Discussion: Outlook and Fallback Fonts by
Hi all,
If you use if mso, this targets all mso, but custom fonts actually work on Outlook 2000–2003, according to this:
https://www.campaignmonitor.com/css/text-fonts/font-face/
They don't work for Outlook 2007–2016.
I wrote some code which targets Outlook 2007–2016 specifically to display Helvetica, and then custom fonts for other Outlook versions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Custom Fonts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<style type="text/css">
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
/* Load Google fonts through @media screen so Outlook 2007/2010/2013/2016 doesn't default to Times New Roman. Litmus uses @font-face with their newsletters too! */
@media screen {
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 300;
src: local('Heebo Light'), local('Heebo-Light'), url(https://fonts.gstatic.com/s/heebo/v3/NGS3v5_NC0k9P9ldb6RMkK4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 700;
src: local('Heebo Bold'), local('Heebo-Bold'), url(https://fonts.gstatic.com/s/heebo/v4/NGS3v5_NC0k9P9lNaKRMkK4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
/* Typography Setup + Desktop Sizes */
h1 {
font-family:'Heebo', Helvetica, Arial, sans-serif;
font-weight:300;
line-height:normal;
font-size:40px;
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
h1 a {
color:#000000;
}
strong, b {
font-weight:700;
}
/* Mobile */
@media only screen and (max-width: 480px) {
h1 {
font-size:25px;
}
}
</style>
<!-- For reference, here's all the Outlook versions and the mso to use
Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016 = mso 16
-->
<!-- Outlook 2007–2016 doesn't support font-face, use web safe fonts instead. Outlook 2000–2003 does support font-face, so we don't need to target those -->
<!--[if (mso 12) | (mso 14) | (mso 15) | (mso 16) ]>
<style>
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
}
strong, b {
font-weight:bold;
}
</style>
<![endif]-->
</head>
<body style="margin:0 auto;">
<h1 style="font-family:Heebo, Helvetica, Arial, sans-serif;">This text is using [if (mso 12) | (mso 14) | (mso 15) | (mso 16) ] so is displaying <strong>Helvetica</strong> for Outlook 2007, 2010, 2013, 2016.<br><br>The custom font <strong><a href="https://fonts.google.com/specimen/Heebo" target="_blank">Heebo</a></strong> is being displayed for Outlook 2000, 2002 and 2003.</h1>
</body>
</html>
Thanks,
Lee.
Replied to Discussion: Outlook app on Android no longer honouring inline styles on links by
Hi Adrian,
Have you tried adding the meta format-detection to the head of the email?
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
I just created a test and uploaded it to Litmus and it seemed to work fine, no blue links.
Here's the Litmus results (click on View email tests, right corner):
https://litmus.com/builder/525a89f
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Linked text and numbers</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Open Graph Sharing Title -->
<meta property="og:title" content="Linked text and numbers" />
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
/* Reset CSS */
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, blockquote {
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
line-height:normal;
color:#666666;
}
/* Outlook.com and Hotmail .ExternalClass class override */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Outlook 2007/2010/2013 'Read in Browser' Link */
#outlook a {
padding:0;
}
/* Outlook fix spacing left and right side of tables */
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse; /* If you’re using border-radius, use border-collapse:separate; instead */
}
/* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
img {
-ms-interpolation-mode:bicubic;
border:0 none;
height:auto;
line-height:100%;
outline:none;
color:#666666;
text-decoration:none;
}
img,
img a,
a img {
border:0 none;
font-size:15px;
color:#666666;
text-decoration:none;
}
a {
outline:none;
color:#333333;
text-decoration:none;
}
/* Remove blue links on Apple and Samsung devices */
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
strong, b {
font-weight:bold;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="" style="background-color:#e4e4e4;">
<tr>
<td align="center" class="" valign="top" style="font-size:20px;padding-top:30px; padding-bottom:30px;">
<p style="color:#666666; font-size:20px;"><a href="https://www.google.com" style="color:#333333; font-size:20px;text-decoration:underline;">This is a link</a><br><br></p>
<p style="color:#666666; font-size:20px;">This number isn't linked 0444444333<br><br></p>
<p style="color:#666666; font-size:20px;">This is a link <a href="tel:0444444333" style="color:#333333;font-size:20px;text-decoration:underline;">0444444333</a></p>
</td>
</tr>
</table>
</body>
</html>
Thanks,
Lee.
Replied to Discussion: Problems with Android 7.1 & 8.0 Gmail by
Hi Ryan,
I've been using this for buttons and it works great when I test in my Litmus account. As you can see, no tables either.
Just change the width from auto to your required px width.
I've just tested this in Android 7.1 and Gmail 8.0 and it displays fine.
<a href="https://minimalco.de" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:13px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:25px;padding-right:25px;display:inline-block;width:auto;border-radius:20px;background-color:#666666;border:2px solid #666666;mso-border-alt:20px solid #666666;mso-padding-alt:0px;">Button Rounded →</a>
<a href="https://minimalco.de" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:13px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:25px;padding-right:25px;display:inline-block;width:auto;border-radius:0;background-color:#666666;border:2px solid #666666;mso-border-alt:20px solid #666666;mso-padding-alt:0px;">Button Square →</a>
Thanks,
Lee.
Replied to Discussion: Which email client support HTML5 please? by
Hi Beate,
Video is supported on Apple Mail, Outlook Mac, Samsung Galaxy and Thunderbird.
Here's some useful links on how to create video in email:
https://litmus.com/blog/how-to-code-html5-video-background-in-email
https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email/
Thanks,
Lee.
https://minimalco.de
Replied to Discussion: Images flushed left on Outlook and non-responsive by
Hi Josh,
Your email was missing the doctype, head and body.
Also, to have content centered, you just needed to put everything in a table which is 100% width and aligned center.
Your mobile-block style needed to be added to the table cells. I've re-created the 2 cols table with the image and text.
There was a small error in the code for align center:
align: "center"
align="center"
Where you have rgb for colours, please change these throughout and use #colour as follows:
color: rgb(77, 77, 77);
color:#999999;
Your footer text was also missing the font 'century gothic'.
I left my commented code in so you can see what it means, but please delete this on your final file as spam checkers don't like commented code.
Litmus preview:
https://litmus.com/builder/059dd26
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>CUNA</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
html,
body {
margin: 0 !important;
padding: 0 !important;
line-height: 26px !important;
}
a {
word-wrap: break-word;
}
img a, a img {
color:#666666;
}
td.large-number {
color: #b5191e;
}
td.title-text {
color: #b5191e;
position: relative;
top: -19px;
line-height: 1.5;
}
td.supporting-text {
position: relative;
top: -21px;
}
ol li {
color: #4d4d4d;
font-family: Georgia, serif;
font-size: 16px;
line-height: 26px;
list-style-position: outside;
padding-left: 1em;
}
ul li {
color: #4d4d4d;
font-family: Georgia, serif;
font-size: 16px;
line-height: 26px;
list-style-position: outside;
padding-left: 1em;
}
.button a {
color: #ffffff;
}
.button a:visited {
color: #ffffff;
}
@media screen and (max-width: 650px) {
table,
tbody,
tr,
td {
width: 100% !important;
display: block !important;
}
td[data-zone="text"],
.force-pad {
width: 92% !important;
padding-left: 4% !important;
padding-right: 4% !important;
}
img {
/*width: initial !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto;*/
}
img.bigimage {
width: 100% !important;
display: block !important;
}
td.two_col,
td.three_col {
padding-bottom: 10px !important;
}
td.article_stack_l {
padding-top: 20px !important;
}
td.article_stack_r {
padding-bottom: 20px !important;
}
td.image_container_2col,
td.image_container_3col {
padding: 10px 0 !important;
}
.phone {
padding-top: 6px !important;
padding-right: 8px !important;
}
.mobile-center {
text-align: center;
}
}
@media screen and (max-width: 365px) {
td.mobile-block {
display: block !important;
width: 100% !important;
}
td.mobile-block img {
width: 100% !important;
max-width: 100% !important;
height:auto;
}
}
</style>
</head>
<body style="margin:0 auto;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="650" class="full_width" style="width: 650px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="he_nodrop full_width" valign="top" style="width:650px;" data-zone="vertical container" data-restrict="delete">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" data-zone="horizontal container">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" align="left" valign="bottom"> </td>
</tr>
<tr>
<td align="left" valign="bottom"><a target="_blank" href="https://www.cuna.org/Home/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_content=header_logo&utm_campaign=INSERT_MESSAGE_NAME"><img src="https://images.magnetmail.net/images/clients/CUNA/EMAIL_TOOLKIT_DEV_V1/logo-nav.png" alt="CUNA | Credit Union National Association" border="0" width="150" height="54"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" data-zone="image" style="text-align: center; width: 650px; border-bottom: 6px solid rgb(215, 215, 215); height: auto;" class=""> </td>
</tr>
<tr>
<td valign="top" style="padding: 20px; left: 0px; top: 0px; width: 610px; height: auto; font-family: georgia, serif; font-size: 16px;" data-zone="text"></td>
</tr>
<tr>
<td class="" valign="top" style="left: 0px; top: 0px; width: 650px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; height: auto;" data-zone="horizontal container">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="240" align="center" valign="top" class="mobile-block"><img class="product-row-image" src="https://maassets.higherlogic.com/image/CUNA/PLACEHOLDER_PR_160580.jpg" alt="product-row-img-responsive.png" border="0" width="240" height="160" hspace="0" vspace="0" draggable="false"></td>
<td width="22" align="left" valign="top" class="mobile-block"> </td>
<td align="left" valign="top" class="mobile-block"><table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="padding: 0px 0px 10px; width: 390px; height: auto; font-family: 'century gothic',centurygothic,sans-serif; color:#4d4d4d; font-size: 24px;" data-zone="text">
<div><strong>Product Row Title</strong> </div>
</td>
</tr>
<tr>
<td valign="top" style="padding: 0px 0px 10px; left: 0px; top: 0px; width: 390px; height: auto; color: rgb(102, 102, 102); text-transform: uppercase; letter-spacing: 1px; font-family: 'century gothic',centurygothic,sans-serif; font-size: 15px; font-weight: bold;" data-zone="text">
<div>Subhead</div>
</td>
</tr>
<tr>
<td valign="top" data-zone="text" style="padding: 0px 0px 20px; font-family: georgia, serif; font-size: 16px; color: rgb(77, 77, 77); width: 390px; height: auto;" class="">
<div>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. </div>
</td>
</tr>
<tr>
<td valign="top" style="padding: 0px; width: 390px; height: auto; font-family: 'century gothic',centurygothic,sans-serif; font-size: 16px;" data-zone="text">
<div><strong><span style="font-size:14px;"><span style="font-family:Century Gothic,CenturyGothic,sans-serif;text-transform:uppercase;"><span style="color:#4d4d4d;"><span style="line-height: 1.5;"><a style="text-decoration: none;color:#B5191E" href="http://cuna.org" target="_blank">SECONDARY CALL TO ACTION ></a></span></span></span></span></strong></div>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" style="padding: 20px; left: 0px; top: 0px; width: 610px; height: auto; font-family: georgia, serif; font-size: 16px;" data-zone="text"></td>
</tr>
<tr>
<td valign="top" data-zone="image" style="left: 0px; top: 0px; text-align: center; width: 650px; height: auto;" class=""> </td>
</tr>
<tr>
<td width="*" class="main_message" valign="top" style="width: 650px; height: auto;" data-zone="vertical container" data-restrict="drag delete edit copy">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="*" valign="top" style="left: 0px; top: 0px; width: 650px; height: auto;" data-zone="vertical container">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" data-zone="text" style="padding: 10px; font-family: georgia, serif; font-size: 16px; width: 630px; border-top: 2px solid rgb(215, 215, 215); height: auto;" class="">
<div>
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="vertical container" style="width: 650px; border-top: 0px none rgb(215, 215, 215); border-bottom: 0px none rgb(215, 215, 215); padding-top: 10px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td align="center" valign="top" class="force-pad" style="width: 650px; text-align: center; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; height: auto;" data-zone="image"><a align="center" href="https://www.cuna.org/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=cuna_logo_footer" target="_blank"><img align="center" alt="Credit Union National Association" border="0" draggable="false" height="50" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/CUNA-primary-RGB-wide_cropped_217207.png" style="width: 139px; height: 50px;" vspace="0" width="139"></a></td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td align="center" valign="top" style="padding: 10px 0px; left: 0px; top: 0px; width: 650px; line-height: 14px; font-family: 'century gothic', centurygothic, sans-serif; font-size: 16px; height: auto;" data-zone="text">
<div style="padding-bottom: 5px; text-align: center;"> <span style="font-size:12px;"><strong><span style="color:#767676;"><span style="text-transform: uppercase;">Washington, D.C.</span></span>
</strong>
</span>
</div>
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;">99 M Street SE Suite 300<br> Washington, D.C. 20003</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px 0px 0px; width: 650px; line-height: 14px; font-family: 'century gothic', centurygothic, sans-serif; font-size: 16px; height: auto;" data-zone="text">
<div style="padding-bottom: 5px; text-align: center;"> <span style="font-size:12px;"><strong><span style="color:#767676;"><span style="text-transform: uppercase;">Madison, WI</span></span>
</strong>
</span>
</div>
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;">5710 Mineral Point Road<br> Madison, WI 53705-4454</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; padding-left: 0px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td align="center" valign="top" style="left: 0px; top: 0px; width: 640px; text-align: center; padding-top: 25px; padding-right: 10px; padding-bottom: 10px; height: auto;" data-zone="image"><img align="center" alt="phone_icon_129072.png" border="0" class="phone" draggable="false" height="36" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/phone_icon_129072.png" style="width: 34px; height: 36px;" vspace="0" width="34"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0px; width: 650px; font-family: georgia, serif; font-size: 16px; height: auto;" data-zone="text">
<div style="text-align: center;"> <span style="font-size:12px;"><strong><span style="color:#767676;"><span style="font-family:'century gothic', centurygothic;line-height:1.5; text-transform: uppercase;">Contact our member experience team</span></span>
</strong>
</span>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0px; width: 650px; font-family: georgia, serif; font-size: 16px; border-bottom: 0px none rgb(215, 215, 215); height: auto;" data-zone="text">
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;"><span style="font-family:'century gothic', centurygothic;line-height:1;">800-356-9655 or <a data-fontcolor="3" href="mailto:hello@cuna.coop" style="color: rgb(95, 95, 95);" target="_blank">hello@cuna.coop</a></span></span>
</span>
</div>
</td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; padding-top: 25px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td align="center" valign="top" class="mobile-center" style="padding: 0px 0px 10px; width: 650px; font-family: georgia, serif; font-size: 16px; height: auto;" data-zone="text">
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;"><span style="font-family:'century gothic', centurygothic;line-height:1;"><a data-fontcolor="3" href="https://www.cuna.org/My-CUNA/Account/My-Email-Preferences/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=email_preferences_footer" style="color: rgb(95, 95, 95); fo" target="_blank">Email Preferences</a> | <a data-fontcolor="3" href="https://www.cuna.org/My-CUNA/Account/My-Email-Preferences/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=unsubscribe_footer" style="font-family:'century gothic', centurygothic;color: rgb(95, 95, 95);" target="_blank">Unsubscribe</a> | <a data-fontcolor="3" href="https://www.cuna.org/PrivacyPolicy/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=privacy_policy_footer" style="color: rgb(95, 95, 95);" target="_blank">Privacy Policy</a> </span></span>
</span>
</div>
</td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td align="center" valign="top" style="padding: 0px 0px 20px; left: 0px; top: 0px; width: 650px; font-family: georgia, serif; font-size: 16px; height: auto;" data-zone="text">
<div style="text-align: center;"> <a align="center" href="https://twitter.com/cuna" target="_blank"><img align="center" alt="CUNA Twitter" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/twitter-square_-_FontAwesome_129071.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> <a align="center" href="https://www.linkedin.com/company/credit-union-national-association" target="_blank"><img align="center" alt="CUNA LinkedIn" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/linkedin-square_-_FontAwesome_129074.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> <a href="https://www.facebook.com/CreditUnionNationalAssociation" style="" target="_blank"><img align="center" alt="CUNA Facebook" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/facebook-square_-_FontAwesome_129070.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> <a href="https://www.instagram.com/creditunionnationalassociation/" style="" target="_blank"><img align="center" alt="CUNA Instagram" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/instagram_-_FontAwesome_129073.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks,
Lee.
https://minimalco.de/
Replied to Discussion: background image in Android 5.1/6 not working by
Hi Michele,
I tested this in my Litmus builder and yes, the bg image doesn't seem to appear in these Android versions.
I found this article, so perhaps it's because the bg images are turned off in the Android preview?
https://litmus.com/community/discussions/4218-gmail-app-on-android-5-background-image-not-displaying
Thanks,
Lee.
https://minimalco.de
Replied to Discussion: Centering tables in Outlook by
Hi Sarah,
Here's the code. I've recreated the tables for this. I've added some media query code which makes the image 90% width for devices less than 670px. You may need to add your styles to some of the tables, but this will give you a good idea of how to create the layout with just a single table.
Litmus code:
https://litmus.com/builder/92d8a9d
Litmus results:
https://litmus.com/checklist/emails/public/21dfe54
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- Page Title -->
<title>Centering Tables - by minimalco.de</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
}
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse;
}
@media only screen and (max-width: 670px) {
.mobile-center {
width:90% !important;
}
.mobile-center img {
width:100% !important;
height:auto;
}
}
</style>
</head>
<body>
<div mc:repeatable="Select" mc:variant="Hero Image">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" bgcolor="#DB001B" class="mobile-left" style="background-image:url('https://gallery.mailchimp.com/4ff27653c499dc6c83f786529/images/33de72bc-d440-48eb-8e5f-9ac3fd5f3021.png'); background-repeat: repeat-y no-repeat; background-position:center;"> </td>
<td width="650" align="center" valign="top" bgcolor="#DB001B" class="mobile-center"><a href="https://www.miltonindustries.com/"><img src="https://gallery.mailchimp.com/4ff27653c499dc6c83f786529/images/5a101578-4cea-4239-8f0d-a655095b4b48.jpg" width="650" height="366" mc:edit="image_2" style="max-width:650px;" border="0" alt="Thanks for signing up! Get $10 off your first purchase." /></a></td>
<td align="center" valign="top" bgcolor="#DB001B" class="mobile-right" style="background-image:url('https://gallery.mailchimp.com/4ff27653c499dc6c83f786529/images/33de72bc-d440-48eb-8e5f-9ac3fd5f3021.png'); background-repeat: repeat-y no-repeat; background-position:center;"> </td>
</tr>
</table>
</div>
</body>
</html>
Let me know how you go.
Thanks,
Lee.
https://minimalco.de