Duicug
Reputation: 51
Email not rendering properly in outlook - hide image on mobile and not importing the font
The email works fine in Gmail and other email clients but in outlook its a total mess(see picture attached).
I can't figured out why is the column getting shrunk in outlook
I want the middle image to be hidden on mobile and show on desktop.
The font also doesn't get imported in outlook.
Appreciate any suggestions. Thanks for your time!
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="x-apple-disable-message-reformatting">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>google email</title>
<!--[if (mso)|(mso 16)]>
<style type="text/css">
.fallback-text { font-family: arial narrow, sans-serif; }
body, table, td, a, span { font-family: arial narrow, Helvetica, sans-serif !important; }
a { text-decoration: none; }
</style>
<![endif]-->
<style type="text/css">
@media screen {
@font-face {
font-family: 'RobotoCondensed-Regular';
font-style: normal;
font-weight: 400;
src: local('RobotoCondensed-Regular'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
}
.main-header-txt {
font-size: 40px;
font-weight: bold;
}
.paragraph-txt {
;
font-size: 18px;
}
.sub-header-txt {
padding: 10px 10px;
font-size: 30px;
font-weight: bold;
line-height: 30px;
}
.white-sub-header-txt {
padding: 0;
font-size: 30px;
font-weight: bold;
line-height: 30px;
color: #ffffff;
}
a.links-white {
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
.nohide {
display: none;
}
}
@media only screen and (max-width: 640px) {
*[class=desktop]{display:none !important;}
*[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
*[class="block"]{display:block !important;padding:5px;}
.deviceWidth {
width: 440px !important;
margin: 0 auto!important;
padding: 0;
}
.b2-padding {
margin: 15px 0px !important;
}
.center {
text-align: center !important;
}
.main-header-txt {
font-size: 40px;
padding: 20px 10px;
line-height: 40px;
font-weight:bold;
}
.hide {
display: none;
}
.img-b2 {
height: auto;
width: 100%;
}
.white-sub-header-txt {
padding: 0;
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #ffffff;
}
.nohide {
display: block;
}
.paragraph-txt {
font-size: 18px;
}
}
</style>
</head>
<body style="width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif;">
<!---------------------------------------------------------------------- Header STARTS ---------------------------------------------------------------->
<table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" valign="top" bgcolor="#f8f8f8" style="padding-top: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" bgcolor="#3c3c3b" class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#3c3c3b">
<tbody><tr>
<td style="padding: 10px 20px; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" bgcolor="#3c3c3b">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-logo"><img src="https://dummyimage.com/120x90/000/fff" alt="google logo" border="0"></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--header logo-->
<table role="presentation" width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" class="deviceWidth" align="center" valign="top" bgcolor="#f5f5f5" style="padding-top: 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
</td>
</tr>
<tr>
<td align="center" class="deviceWidth fallback-text" style="font-size: 16px; color: #272727; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: middle; padding: 10px 5px 10px 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB2</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB3</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1TAB2</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: red;">TAB4
</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!---------------------------------------------------------------------- Header ENDS ---------------------------------------------------------------->
<!--banner1-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#3b3b3c" style="border-collapse: collapse; background-color: #3b3b3c; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td class="mobile" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Banner1-IMAGE">
<img width="100%" max-width="640px" src="https://dummyimage.com/969x626/000/fff" alt="" border="0" style="display:block; width:100%;max-width:640px;" class="deviceWidth">
</a>
</p>
</td>
</tr>
</tbody></table>
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#978B8B" style="border-collapse: collapse; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td colspan="3" width="100%" class="deviceWidth fallback-text" style="text-decoration: none; text-underline: none; color: #ffffff; font-weight: bold; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="30" style="height: 30px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
<span class="main-header-txt">
<b>WRAP UP</b>
</span>
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="10" style="height: 10px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td width="5%"></td>
<td width="90%" style=" color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; vertical-align: top; font-weight: 300; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
<span class="paragraph-txt">
DummyText
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</span>
</td>
<td width="5%"></td>
</tr>
<tr height="60">
<td colspan="3" class="fallback-text" style="font-size: 16px; color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; text-decoration: underline; vertical-align: top; padding: 0px 15px 15px 15px; font-weight: bold; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" line-height:50px;="" bgcolor="#978B8B" align="center" valign="top">
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<table class="fullwidth" style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td></tr></tbody></table>
</td>
</tr>
</tbody></table>
<!--end banner 1-->
<!--spacer-->
<table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<!-- banner 2-->
<table height="250" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3b3b3c" style="border-collapse: collapse; margin: 10px auto; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td class="center" style="padding: 0 0 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Split-Banner-Image1">
<img width="270" height="250" src="https://dummyimage.com/540x500/000/fff&text=left" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="img-b2">
</a>
</p>
</td>
</tr>
</tbody></table>
<table width="100" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="hide" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Split-Banner-Image1">
<img width="100" height="250" src="https://dummyimage.com/200x500/000/fff&text=middle" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="">
</a>
</p>
</td>
</tr>
</tbody></table>
<table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="right" bgcolor="#3b3b3c" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="270" align="center" class="fallback-text" style="text-align: center; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<br>
<br>
<p>new new new new new</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--end banner 2-->
<!--spacer-->
<table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<!----------------------------------------------------------------- footer STARTS here --------------------------------------------------------------------------------->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fallback-text device" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td bgcolor="#363636" style="padding: 10px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 26px; vertical-align: top; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
<br>
</td>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="right" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<a target="_blank" href="https://itunes.apple.com/gb/app/apple-store/id1039829129?mt=8" style="border:0;"></a>
</td>
<td width="10" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td>
<td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<a target="_blank" href="https://play.google.com/store/apps/details?id=uk.co.google.hybrid&hl=en_GB" style="border:0;"></a>
</td>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="text-decoration: none; text-underline: none; font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
</td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; line-height: 15px; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
g xn fcn hgch c h <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none; ">%%emailaddr%%</span>
<br><br>
If you do not wish to receive our newsletters, please <br><br>
chmchmcgmn
<span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none;"><font color="#999999">mhgck</font></span> hcgv
<br><br>
mhgcmcg <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; text-align:center;" href="http://www.google.co.uk/h/option/terms_conditions/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-termsandconditions" target="_blank"></a> & <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; font-weight: normal; color: #999999; text-align:center;" href="http://www.google.co.uk/h/option/PrivacyPolicy/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-privacypolicy" target="_blank"><span style="text-decoration: underline; color: #999999">
</span></a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!----------------------------------------------------------------- footer ENDS here --------------------------------------------------------------------------------->
</body></html>Upvotes: 0
Views: 227
Answers (3)
Syfer
Reputation: 4499
I attempted to fix your code slightly and here is what I have done:
- Added a ghost table around your email code. Ghost tables use similar code to what you have on line 14 for CSS. If Outlook 2009 and above, show start of table. First one is placed after the
bodytag. Another one at the very end of the code (beforebodyclose) to close the table off. - Middle image is hidden with CSS in media query. If media query is supported in any email client and has a screen size of 640px and below, the middle image will be hidden.
- Web fonts are not supported in Outlook. You will need to use web safe for all Outlooks. If however a user has the font installed on their machine, they will be able to view the font. You can find all web safe fonts here. Note: Comic sans is no longer available in iOS.
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="x-apple-disable-message-reformatting">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>google email</title>
<!--[if (mso)|(mso 16)]>
<style type="text/css">
.fallback-text { font-family: arial narrow, sans-serif; }
body, table, td, a, span { font-family: arial narrow, Helvetica, sans-serif !important; }
a { text-decoration: none; }
</style>
<![endif]-->
<style type="text/css">
@media screen {
@font-face {
font-family: 'RobotoCondensed-Regular';
font-style: normal;
font-weight: 400;
src: local('RobotoCondensed-Regular'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
}
.main-header-txt {
font-size: 40px;
font-weight: bold;
}
.paragraph-txt {
;
font-size: 18px;
}
.sub-header-txt {
padding: 10px 10px;
font-size: 30px;
font-weight: bold;
line-height: 30px;
}
.white-sub-header-txt {
padding: 0;
font-size: 30px;
font-weight: bold;
line-height: 30px;
color: #ffffff;
}
a.links-white {
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
.nohide {
display: none;
}
}
@media only screen and (max-width:640px) {
*[class=desktop]{display:none !important;}
*[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
*[class="block"]{display:block !important;padding:5px;}
.deviceWidth {
width: 100% !important;
max-width:640px !important;
margin: 0 auto!important;
padding: 0;
}
.b2-padding {
margin: 15px 0px !important;
}
.center {
text-align: center !important;
}
.main-header-txt {
font-size: 40px;
padding: 20px 10px;
line-height: 40px;
font-weight:bold;
}
.hide {
display: none !important;
}
.img-b2 {
height: auto;
width: 100%;
}
.white-sub-header-txt {
padding: 0;
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #ffffff;
}
.nohide {
display: block;
}
.paragraph-txt {
font-size: 18px;
}
}
</style>
</head>
<body style="width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif;">
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<!---------------------------------------------------------------------- Header STARTS ---------------------------------------------------------------->
<table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;max-width:640px;">
<tbody><tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" valign="top" bgcolor="#f8f8f8" style="padding-top: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" bgcolor="#3c3c3b" class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#3c3c3b">
<tbody><tr>
<td style="padding: 10px 20px; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" bgcolor="#3c3c3b">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-logo"><img src="https://dummyimage.com/120x90/000/fff" alt="google logo" border="0"></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--header logo-->
<table role="presentation" width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="100%" class="deviceWidth" align="center" valign="top" bgcolor="#f5f5f5" style="padding-top: 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
</td>
</tr>
<tr>
<td align="center" class="deviceWidth fallback-text" style="font-size: 16px; color: #272727; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: middle; padding: 10px 5px 10px 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB2</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB3</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1TAB2</a>
<a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: red;">TAB4
</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!---------------------------------------------------------------------- Header ENDS ---------------------------------------------------------------->
<!--banner1-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#3b3b3c" style="border-collapse: collapse; background-color: #3b3b3c; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td class="mobile" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Banner1-IMAGE">
<img width="100%" max-width="640px" src="https://dummyimage.com/969x626/000/fff" alt="" border="0" style="display:block; width:100%;max-width:640px;" class="deviceWidth">
</a>
</p>
</td>
</tr>
</tbody></table>
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#978B8B" style="border-collapse: collapse; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td colspan="3" width="100%" class="deviceWidth fallback-text" style="text-decoration: none; text-underline: none; color: #ffffff; font-weight: bold; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="30" style="height: 30px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
<span class="main-header-txt">
<b>WRAP UP</b>
</span>
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="10" style="height: 10px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
</td>
</tr>
<tr>
<td width="5%"></td>
<td width="90%" style=" color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; vertical-align: top; font-weight: 300; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
<span class="paragraph-txt">
DummyText
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</span>
</td>
<td width="5%"></td>
</tr>
<tr height="60">
<td colspan="3" class="fallback-text" style="font-size: 16px; color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; text-decoration: underline; vertical-align: top; padding: 0px 15px 15px 15px; font-weight: bold; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" line-height:50px;="" bgcolor="#978B8B" align="center" valign="top">
<table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<table class="fullwidth" style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td></tr></tbody></table>
</td>
</tr>
</tbody></table>
<!--end banner 1-->
<!--spacer-->
<table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<!-- banner 2-->
<table height="250" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3b3b3c" style="border-collapse: collapse; margin: 10px auto; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td class="center" style="padding: 0 0 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Split-Banner-Image1">
<img width="270" height="250" src="https://dummyimage.com/540x500/000/fff&text=left" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="img-b2">
</a>
</p>
</td>
</tr>
</tbody></table>
<table width="100" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="hide" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=Split-Banner-Image1">
<img width="100" height="250" src="https://dummyimage.com/200x500/000/fff&text=middle" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="">
</a>
</p>
</td>
</tr>
</tbody></table>
<table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="right" bgcolor="#3b3b3c" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td width="270" align="center" class="fallback-text" style="text-align: center; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<br>
<br>
<p>new new new new new</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--end banner 2-->
<!--spacer-->
<table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
<!----------------------------------------------------------------- footer STARTS here --------------------------------------------------------------------------------->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fallback-text device" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td bgcolor="#363636" style="padding: 10px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 26px; vertical-align: top; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
<br>
</td>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td align="right" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<a target="_blank" href="https://itunes.apple.com/gb/app/apple-store/id1039829129?mt=8" style="border:0;"></a>
</td>
<td width="10" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td>
<td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<a target="_blank" href="https://play.google.com/store/apps/details?id=uk.co.google.hybrid&hl=en_GB" style="border:0;"></a>
</td>
</tr>
</tbody></table>
<table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="text-decoration: none; text-underline: none; font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
</td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody><tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; line-height: 15px; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
g xn fcn hgch c h <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none; ">%%emailaddr%%</span>
<br><br>
If you do not wish to receive our newsletters, please <br><br>
chmchmcgmn
<span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none;"><font color="#999999">mhgck</font></span> hcgv
<br><br>
mhgcmcg <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; text-align:center;" href="http://www.google.co.uk/h/option/terms_conditions/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-termsandconditions" target="_blank"></a> & <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; font-weight: normal; color: #999999; text-align:center;" href="http://www.google.co.uk/h/option/PrivacyPolicy/?utm_source=%%=v(@track)=%%&utm_medium=email&utm_campaign=%%=v(@CampaignTracking)=%%&utm_content=google-email-privacypolicy" target="_blank"><span style="text-decoration: underline; color: #999999">
</span></a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!----------------------------------------------------------------- footer ENDS here --------------------------------------------------------------------------------->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body></html>Upvotes: 1
Andrew Paul
Reputation: 162
Mailchimp still (Feb 2020) recommends using tables and shim.gif images for email layout. See this answer for some background - pixel.gif, why do people use it?
We need to assume that email clients are using the most backwards system of HTML rendering and work accordingly. It might help your process to start as simply as possible then add features until they break things.
<center>
<table border="0" cellpadding="0" cellspacing="0" align="center"
bgcolor="#f5f5f5">
<tr><td>
This is my text
<img src="https://my_website/trans.gif" width="640" height="1">
</td></tr>
</table>
</center>
Nasty as it is, this ought to give you a 640px wide column.
For safety's sake it's also worth keeping lines under 79 characters:
Each line of characters MUST be no more than 998 characters, and SHOULD be no more than 78 characters, excluding the CRLF.
RFC2822 https://www.rfc-editor.org/rfc/rfc2822#page-6
Upvotes: 1
RichardDev
Reputation: 551
It looks like you're only using percentages for widths when you should be using hard pixel values for the desktop. A lot of desktop clients (ESPECIALLY Outlook) need a hard pixel value. You're mobile stuff can use percentage since all those clients read %.
As an example is a modified version of one of your tables. In it are hard pixel value for the width and a media query class that makes the width 100% on everything that isn't the set desktop size. All your mobile classes should have !important labels too to prevent some email clients from Overwriting them.
<table role="presentation" width="640" class="wrapper" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td >
This is my text
</td>
</tr>
</table>
@media only screen and (max-width: 639px) {
.wrapper {
width: 100% !important;
}
}
Upvotes: 2
Related Questions
- CSS Email Template at Outlook does not display correctly
- CSS in Outlook email its not working properly
- HTML: Outlook not rendering correctly email
- Outlook email rendering CSS
- Wrong display of html e-mail in Outlook
- HTML email: making it work both in Outlook and on mobile
- Responsive email not doing its thing in Outlook
- html email not showing as in browser
- Responsive email template Outlook displaying issue
- HTML Email image not showing on mobile email clients