Hello, I have created an email template within Marketo. When previewing and sending tests it looks great in all platforms, (mobile Gmail, Yahoo etc) except for Outlook. I know Outlook is always wonky when it comes to HTML and emails, but in this case it seems worse than normal. I've talked to a few developers on my team and they cannot seem to solve. Was wondering if anyone has a solution. Screenshots attached below: Outlook Rendering How it previews in Marketo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="width=device-width" name="viewport" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" /> <style type="text/css"> :root { color-scheme: light dark; supported-color-schemes: light dark; } </style> <style type="text/css"> body { margin: 0; padding: 0; font-family: 'Roboto', Tahoma, Verdana, Segoe, sans-serif; color: #282b3e; line-height: 1.5; background-color: #fafafa; } table { background-color: transparent; } table, td, tr { vertical-align: top; border-collapse: collapse; } .block-grid { margin: 0 auto; min-width: 320px; max-width: 500px; background-color: #fff; } * { line-height: inherit; } a[x-apple-data-detectors=true] { color: inherit !important; text-decoration: none !important; } .button-container { padding: 10px 10px 10px 15px; } .button-container .primaryCTA { text-decoration: none; display: inline-block; color: #fff; background-color: #EC6453; width: auto; border: 1px solid #EC6453; text-align: center; mso-border-alt: none; padding: 5px 55px; font-size: 17px; line-height: 34px; mso-line-height-alt: 32px; } .button-container .secondaryCTA { font-size: 16px; line-height: 2; mso-line-height-alt: 32px; color: #282b3e; text-decoration: none; display: inline-block; width: auto; border: 1px solid #EC6453; padding: 5px 25px; text-align: center; mso-border-alt: none; word-break: keep-all; } #JH_DTC_Footer_Unsubscribe a { font-decoration: none; color: #fff; } </style> <style id="media-query" type="text/css"> @media (max-width: 520px) { .block-grid, .col { min-width: 320px !important; max-width: 100% !important; display: block !important; } .block-grid { width: 100% !important; } .col { width: 100% !important; } .col>div { margin: 0 auto; } img.fullwidth, img.fullwidthOnMobile { max-width: 100% !important; } .no-stack .col { min-width: 0 !important; display: table-cell !important; } .no-stack.two-up .col { width: 50% !important; } .no-stack .col.num3 { width: 33% !important; } .no-stack .col.num8 { width: 66% !important; } .no-stack .col.num4 { width: 25% !important; } .no-stack .col.num6 { width: 50% !important; } .no-stack .col.num9 { width: 75% !important; } .video-block { max-width: none !important; } .mobile_hide { min-height: 0px; max-height: 0px; max-width: 0px; display: none; overflow: hidden; font-size: 0px; } .desktop_hide { display: block !important; max-height: none !important; } } @media (prefers-color-scheme: dark) { body { color: #282b3e; background-color: #555; } table { background: transparent; } .block-grid { background-color: white; } } [data-ogsc] body { color: #282b3e; background-color: #555; } [data-ogsb] table { background: transparent; } [data-ogsb] .block-grid { background-color: white; } </style> </head> <body style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%;"> <table cellpadding="0" cellspacing="0" class="mktoContainer" id="JH_DTC_Beefree_test_Template" role="presentation" style="table-layout: fixed; vertical-align: top; min-width: 320px; margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" valign="top" width="100%"> <tr class="mktoModule" id="JH_DTC_Header_Logo_Module" mktoName="JH DTC Header Logo Module"> <td> <div style="background-color: #282B3E;"> <div align="center" style="display: table; width: 100%; padding: 0"> <div class="mktoImg" id="JH_DTC_Header_Logo" mktoName="JH DTC Header Logo" mktoImgSrc="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png" mktoImgWidth="250"> <img style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 250px; display: block;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png"> </div> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Header_Image_Module" mktoName="JH DTC Header Image Module"> <td> <div align="center" class="block-grid"> <div class="mktoImg" id="JH_DTC_Header_Image" mktoName="JH DTC Header Image" mktoImgSrc="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/email-hero-1.jpg" mktoImgWidth="500"> <img style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 500px; display: block;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/email-hero-1.jpg"> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Body_Copy_Module" mktoName="JH DTC Body Copy Module"> <td> <div class="block-grid"> <div style="font-size: 24px; color: #5e6073; font-weight: bold; mso-line-height-alt: 36px; margin: 0 ;padding: 15px 20px 0px 20px;"> <div class="mktoText" id="JH_DTC_Header_Text" mktoName="JH DTC Header Text"> Header </div> </div> <div style="font-size: 16px; mso-line-height-alt: 24px; margin: 0 ;padding: 10px 20px 5px 20px;"> <div class="mktoText" id="JH_DTC_Body_Copy_Upper" mktoName="JH DTC Body Copy Upper"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. Nam non venenatis nulla. Vivamus id arcu viverra, tempus elit vitae, porttitor massa. Nullam faucibus nibh in tellus vulputate, in egestas elit dapibus. </div> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_CTA_Module" mktoName="JH DTC CTA Module"> <td> <div class="block-grid"> <div align="center" class="button-container"> <div class="mktoText" id="JH_DTC_CTA_Button" mktoName="JH DTC CTA Button"> <button class="primaryCTA" onclick="INSERT_LINK_HERE"> Learn more </button> </div> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Body_Copy_Lower_Module" mktoName="JH DTC Body Copy Lower Module"> <td> <div class="block-grid"> <div style="font-size: 16px; mso-line-height-alt: 24px; margin: 0 ;padding: 10px 20px 5px 20px;"> <div class="mktoText" id="JH_DTC_Body_Copy_Lower" mktoName="JH DTC Body Copy Lower"> Your Coverage Coach<br /> (800) 803-7998 </div> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Quote_Bar_Module" mktoName="JH DTC Quote Bar Module"> <td> <div div class="mktoText" id="JH_DTC_Quote_Table" mktoName="JH DTC Quote Table" style="margin: 0 auto; min-width: 320px; max-width: 500px; background-color: #0000C1; color: #fff; display: table"> <div style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top;"> <div style=" padding: 25px 15px 15px 15px;"> <p style="font-size: 12px; mso-line-height-alt: 18px; margin: 0; font-weight: bold"> QUOTE FOR: </p> <p style="font-size: 16px; mso-line-height-alt: 24px; margin: 0;"> {{lead.Full Name:default=Pat Smith}} </p> </div> </div> <div style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; border-left: 1px solid #fff;"> <div style="line-height: 1.2; padding: 25px 15px 15px 15px;"> <p style="font-size: 20px; margin: 0; font-weight: bold"> {{lead.Current Premium:default=$50.00}}/ </p> <p style="font-size: 12px; margin: 0;"> month </p> </div> </div> <div style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; border-left: 1px solid #fff;"> <div style="line-height: 1.2; padding: 25px 15px 15px 15px;"> <p style="font-size: 20px; margin: 0; font-weight: bold"> {{lead.Face Amount:default=$200,000}} </p> <p style="font-size: 12px; margin: 0;"> COVERAGE </p> </div> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Horizontal_Rule" mktoName="JH DTC Horizontal Rule"> <td> <div class="block-grid"> <div style="border:0px solid transparent; padding: 15px 0;"> <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" /> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_1Col" mktoName="JH DTC 1Col"> <td> <div class="block-grid"> <div class="col num3" style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 164px;"> <div align="center" class="mktoImg" id="JH_DTC_1Col_Image" mktoName="JH DTC Col Image" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/square-test.jpg" style="padding:5px 0 5px 0;"> <img align="center" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/square-test.jpg" style="border: 0; height: auto;" width="166" /> </div> </div> <div class="col num8" style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 328px; width: 333px;"> <div style="padding: 5px 0"> <div style="padding:10px 15px"> <div class="mktoText" id="JH_DTC_1Col_Title" mktoName="JH DTC 1Col Title" style="font-size: 16px; mso-line-height-alt: 24px; margin: 0; font-weight: bold"> Headline </div> <p class="mktoText" id="JH_DTC_1Col_Text" mktoName="JH DTC 1Col Text" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. </p> </div> <div align="left" class="button-container"> <div class="mktoText" id="JH_DTC_Headline_Button" mktoName="JH DTC Headline Button"> <button class="secondaryCTA" onclick="INSERT_LINK_HERE"> Learn more </button> </div> </div> </div> </div> </div> <div class="block-grid"> <div style="border:0px solid transparent; padding: 15px 0;"> <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" /> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Testimonial_Module" mktoName="JH DTC Testimonial Module"> <td> <div class="block-grid" style="background-color: #0000c1;"> <div class="mktoText" id="JH_DTC_Testimonial" mktoName="JH DTC Testimonial" style="color: #fff; font-size: 16px; mso-line-height-alt: 21px; margin: 0; padding: 25px 20px 20px 20px; font-style: italic;"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. Nam non venenatis nulla." </div> </div> <div class="block-grid"> <div style="border-collapse: collapse;display: table;width: 100%;"> <div class="col num4" style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 123px; width: 125px; padding: 10px 0 5px 0px; text-align: center;"> <div class="mktoImg" id="JH_DTC_Testimonial_Image" mktoName="JH DTC Testimonial Image" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/avatar_1.png"> <img style="border: 0; height: auto; width: 100%; max-width: 81px;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/avatar_1.png" /> </div> </div> <div class="col num9" style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 369px; padding: 20px 15px 15px 15px;"> <div class="mktoText" id="JH_DTC_Testimonial_Name" mktoName="JH DTC Testimonial Name" style="font-size: 16px; mso-line-height-alt: 18px; font-style: italic; font-weight: bold;"> Paul, San Diego </div> <div class="mktoText" id="JH_DTC_Testimonial_Type" mktoName="JH DTC Testimonial Type" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;"> DTC Insurance customer </div> </div> </div> </div> <div class="block-grid"> <div style="padding: 15px 0;"> <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" /> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_3Col" mktoName="JH DTC 3 Col"> <td> <div class="block-grid three-up" style="display: table; margin: 0 auto; min-width: 320px; max-width: 500px;"> <div class="col num3" style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; padding: 5px 0"> <div class="mktoImg" id="JH_DTC_3Col_Image1" mktoName="JH DTC 3Col Image1" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/apple-01.png"> <img class="center autowidth" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/apple-01.png" style="border: 0; height: auto; width: 100%; max-width: 72px; display: block; margin: 0 auto;" /> </div> <div style="padding:10px 15px; text-align: center;"> <div class="mktoText" id="JH_DTC_3Col_Title1" mktoName="JH DTC 3Col Title1" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold;"> Headline </div> <div class="mktoText" id="JH_DTC_3Col_Text1" mktoName="JH DTC 3Col Text1" style="font-size: 14px; mso-line-height-alt: 21px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus. </div> </div> </div> <div class="col num3" style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; padding: 5px 0"> <div class="mktoImg" id="JH_DTC_3Col_Image2" mktoName="JH DTC 3Col Image2" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/bday-01.png"> <img class="center autowidth" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/bday-01.png" style="border: 0; height: auto; width: 100%; max-width: 72px; display: block; margin: 0 auto;" /> </div> <div style="padding:10px 15px; text-align: center;"> <div class="mktoText" id="JH_DTC_3Col_Title2" mktoName="JH DTC 3Col Title2" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold;"> Headline </div> <div class="mktoText" id="JH_DTC_3Col_Text2" mktoName="JH DTC 3Col Text2" style="font-size: 14px; mso-line-height-alt: 21px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus. </div> </div> </div> <div class="col num3" style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; padding: 5px 0"> <div class="mktoImg" id="JH_DTC_3Col_Image3" mktoName="JH DTC 3Col Image3" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/family-01.png"> <img class="center autowidth" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/family-01.png" style="border: 0; height: auto; width: 100%; max-width: 72px; display: block; margin: 0 auto;" /> </div> <div style="padding:10px 15px; text-align: center;"> <div class="mktoText" id="JH_DTC_3Col_Title3" mktoName="JH DTC 3Col Title3" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold;"> Headline </div> <div class="mktoText" id="JH_DTC_3Col_Text3" mktoName="JH DTC 3Col Text3" style="font-size: 14px; mso-line-height-alt: 21px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus. </div> </div> </div> </div> <div class="block-grid"> <div style="padding: 15px 0;"> <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" /> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_2Col" mktoName="JH DTC 2 Col"> <td> <div class="block-grid two-up" style="margin: 0 auto; min-width: 320px; max-width: 500px;"> <div class="col num3" style="max-width: 320px; min-width: 247px; display: table-cell; vertical-align: top; padding: 10px 16px 5px 0"> <div class="mktoImg" id="JH_DTC_2Col_Image1" mktoName="JH DTC 2Col Image1" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/mountains.jpg" style="padding-right: 10px;"> <img src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/mountains.jpg" style="border: 0; height: auto; width: 100%; max-width: 240px; display: block; text-align: center" /> </div> <div style="padding: 10px 15px;"> <div class="mktoText" id="JH_DTC_2Col_Title1" mktoName="JH DTC 2Col Title1" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold"> Headline </div> <div class="mktoText" id="JH_DTC_2Col_Text1" mktoName="JH DTC 2Col Text1" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. </div> </div> <div align="left" class="button-container"> <div class="mktoText" id="JH_DTC_2Col_Button1" mktoName="JH DTC 2Col Button1"> <button class="secondaryCTA" onclick="INSERT_LINK_HERE"> Learn more </button> </div> </div> </div> <div class="col num3" style="max-width: 320px; min-width: 247px; display: table-cell; vertical-align: top; padding: 10px 0 5px 0;"> <div class="mktoImg" id="JH_DTC_2Col_Image2" mktoName="JH DTC 2Col Image2" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/plants.jpg" style="padding-right: 10px;"> <img src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/plants.jpg" style="border: 0; height: auto; width: 100%; max-width: 240px; display: block; text-align: center" /> </div> <div style="padding: 10px 15px;"> <div class="mktoText" id="JH_DTC_2Col_Title2" mktoName="JH DTC 2Col Title2" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold"> Headline </div> <div class="mktoText" id="JH_DTC_2Col_Text2" mktoName="JH DTC 2Col Text2" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. </div> </div> <div align="left" class="button-container"> <div class="mktoText" id="JH_DTC_2Col_Button2" mktoName="JH DTC 2Col Button2"> <button class="secondaryCTA" onclick="INSERT_LINK_HERE"> Learn more </button> </div> </div> </div> </div> </td> </tr> <tr class="mktoModule" id="JH_DTC_Footer" mktoName="JH DTC Footer"> <td> <div class="block-grid" style="background-color: #282B3E; display: table; padding: 10px 0 5px 0; color: #fff;"> <div class="mktoImg" id="JH_DTC_Footer_Logo" mktoName="JH DTC Footer Logo" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png"> <img src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png" style="border: 0; height: auto; width: 100%; max-width: 200px; display: block; margin: 10px auto;" /> </div> <div class="mktoText" id="JH_DTC_Footer_Text" mktoName="JH DTC Footer Text" style="font-size: 12px; mso-line-height-alt: 14px; line-height:1.2;padding: 10px 15px 15px 15px;"> 1 Quotes expire after 30 days and are subject to change based on the information provided by you, the age of the quote and your age at the time the quote was generated. <br /> John Hancock’s Final Expense Life Insurance with Guaranteed Acceptance is a level premium Whole Life Policy, only issued to individuals from age 55 to 80. It provides a limited graded death benefit for the first two years (110% of premiums paid). <br /> The policy contains specific exclusions, limitations, terms for keeping it in force, and termination provisions. Its availability and terms may vary by state. Contact John Hancock and its agents for further details, as well as additional information on policy costs and features. <br /> Insurance policies are sold by John Hancock Life Insurance Company (U.S.A.), Boston, MA. 02116 <br /> Depending on state of issuance, this policy is sold under policy form # ICC18 18FEWL or 18FEWL. <br /> Copyright 2019 John Hancock. All rights reserved. </div> <hr style="width: 92%" /> <div div class="mktoText" id="JH_DTC_Footer_Unsubscribe" mktoName="JH DTC Footer Unsubscribe" style="font-size: 14px; line-height: 1.2; text-align: center; mso-line-height-alt: 17px; margin: 0; padding: 10px;"> Manage your Preferences or <a href="{{system.unsubscribeLink}}">Unsubscribe</a>. </div> </div> </td> </tr> </table> </body> </html>
... View more