Re: Marketo email template formatting issue when forwarded or reply to from outlook app

jtanusri · ‎10-15-2023

@Jo_Pitts1 and @Darshil_Shah1 - i have reported the code as per the suggested post.

And yes, we removed the 2 column (Image + Copy) article and tried forwarding the NL, it is not showing the issue.

The issue only comes up when we are forwarding the 2 column design.

Thanks,

Tanu

Tanusri Jammalamadaka

Jo_Pitts1 · ‎10-15-2023

@jtanusri,

there are a LOT of modules in there still. Can you remove them ALL except the one that causes problems, and repost that code.

I'm trying to get you to help us help you. We need the crux of the problem.

Cheers

Jo

Jo_Pitts1 · ‎10-15-2023

@jtanusri ,

In a moment of boredom, I went through and deleted the irrelevant modules from what you sent through.

The code I ended up with was:

<!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" style="width: 100%;">
  <head> 
    <!-- Marketo Variable Definitions --> 
    <meta class="mktoNumber" id="photoRSpacer1" mktoname="Spacer" default="24" min="1" max="300" units="px" step="1" mktomodulescope="true" /> 
    <meta class="mktoColor" id="emailBackgroundColor" mktoname="Email Background Color" default="#ffffff" mktomodulescope="true" /> 
    <meta class="mktoColor" id="photoRBackgroundColor1" mktoname="Module Background" default="#F4F3EF" mktomodulescope="true" /> 
    <!-- Other Meta Tags --> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
    <meta name="robots" content="noindex,nofollow" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700" rel="stylesheet" type="text/css" /> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
    <!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: 'Source Serif Pro', serif !important;
}
</style>
<![endif]--> 
    <!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: 'Source Sans Pro', calibri , arial !important;
}
</style>
<![endif]--> 
    <!--[if mso]>
<style type='text/css'>
.button a:link, .button a:visited, .button a:hover {
color: #ffffff !important;
}
.link a:link, .link a:visited, .link a:hover {
color: #007C92 !important;
}
.title a:link, .title a:visited,.title a:hover {
color: #651C32 !important;
}
.bold a:link, .bold a:visited,.bold a:hover {
color: #000000 !important;
}
.view a:link, .view a:visited,.view a:hover {
color: #928B81 !important;
}
</style>
<![endif]--> 
    <style>
/*startcommon*/
@media only screen and (max-width: 700px) {
table.m_boxing{
width: 100% !important;
}
}
/*endcommon*/
</style> 
    <style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.primary-font {
font-family: 'Source Serif Pro', serif !important;
}
.secondary-font {
font-family: 'Source Sans Pro', calibri , arial !important;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
color: .m_000;
text-decoration: none;
}
.appleFooter a {
color: .m_000;
text-decoration: none;
}
@-ms-viewport {
width: device-width;
}
.button a:link, .button a:visited, .button a:hover {
color: #ffffff !important;
}
.link a:link, .link a:visited, .link a:hover {
color: #007C92 !important;
}
.title a:link, .title a:visited,.title a:hover {
color: #651C32 !important;
}
.bold a:link, .bold a:visited,.bold a:hover {
color: #000000 !important;
}
.view a:link, .view a:visited,.view a:hover {
color: #928B81 !important;
}

</style> 
    <style type="text/css">
.mobile{border-spacing:0;display:none!important;height:0;max-height:0;mso-hide:all;overflow:hidden;visibility:hidden;width:0;}
@media only screen and (max-width:480px){
.full-width {
width:100% !important;
}
.mobile-spacer{
width:32px
}
.web {
display:none !important;
}
.mobile{
display:inline-block !important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
visibility:visible !important;
width:100% !important;
}
.content{
margin-left:0px !important;
}
.p{
padding:0px !important;
}
.mobile-spacer-gap{
height:20px !important;
}
.img1 {
width:100% !important;
max-width:100% !important;
}
.headTitle{
font-size: 32px !important;
line-height: 32px !important;
}
.top-spacer{
font-size: 24px !important;
line-height: 24px !important;
height: 24px !important;
}
.titleTop{
font-size: 26px !important;
line-height: 26px !important;
}

.big{
max-width: 50px !important;
width: 50px !important;
}
.small{
max-width: 45px !important;
width: 45px !important;
}
.gap{
width: 10px !important;
}
.photo{
width: 100% !important;
}
.responsive{
width: 100% !important;
}
}

</style> 
    <style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
</style> 
  </head> 
  <body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;"> 
    <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    </div> 
    <!-- Outer table START --> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;"> 
      <tbody> 
        <tr> 
          <td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; width: 600px; border-collapse: collapse; background-color:${emailBackgroundColor};"> 
            <table width="600" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" class="m_boxing"> 
              <tbody> 
                <tr> 
                  <td class="mktoContainer boxedbackground" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
                    <table id="photoR" style="border-spacing: 0; border-collapse: collapse;" align="center" width="600" cellspacing="0" cellpadding="0" border="0" class="mktoModule m_photoR full-width" mktoname="PhotoR"> 
                      <tbody> 
                        <tr> 
                          <td class="module" style="word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${photoRBackgroundColor1};" valign="top" bgcolor="${photoRBackgroundColor1}"> 
                            <table class="full unboxed" style="border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; width: 100%;" align="center" cellspacing="0" cellpadding="0" border="0"> 
                              <tbody> 
                                <tr> 
                                  <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${photoRSpacer1};font-size:${photoRSpacer1};" height="${photoRSpacer1}">&nbsp;</td> 
                                </tr> 
                                <tr> 
                                  <td class="mobile-spacer" width="32" style="font-size: 0;">&nbsp;</td> 
                                  <td class="contents" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;"> 
                                    <table class="content web" style="border-spacing: 0; text-align: center;" role="presentation"> 
                                      <tbody> 
                                        <tr class="row"> 
                                          <td class=" text col" style=" -moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #FFFFFF;font-size: 16px;line-height: 24px;border-collapse: collapse;text-align: left;vertical-align: top;"> 
                                            <div class="mktoText" mktoname="Desktop Title" id="title12">
                                              <p class="title primary-font" style="margin-top: 0px; margin-bottom: 0px;"><span style="font-family: 'Source Serif Pro'; font-size: 22px; color: #651c32; line-height: 26px;"><a href="https://{{my.XXX life learn more:default=edit me}}" style="text-decoration: none; color: #651c32; margin: 0;">All the Places You Can Get Care</a></span></p>
                                            </div> 
                                            <div class="mktoText" mktoname="Desktop Space" id="space122">
                                              <p style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: 8px; font-size: 8px; margin: 0;" height="8">&nbsp;</p>
                                            </div> 
                                            <div class="mktoText" mktoname="Desktop Description" id="i37">
                                              <p class="bold secondary-font" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Source Sans Pro' , calibri , arial; color: #000000; font-weight: 400; margin: 0;">LifeConnections Health Center offers same-day primary XXX, Monday – Saturday. Explore all your options for XXX with Stanford Medicine, including our new orthopaedic program.</p>
                                            </div> 
                                            <div class="mktoText" mktoname="Desktop Space" id="space321">
                                              <p style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: 8px; font-size: 8px; margin: 0;" height="8">&nbsp;</p>
                                            </div> 
                                            <div class="mktoText" mktoname="Desktop Link" id="link1">
                                              <p class="link secondary-font" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Source Sans Pro'; margin: 0;"><a href="https://{{my.XXX life learn more:default=edit me}}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #007c92;">Learn More</a><br /><a href="https://8XXXXXXalliance.org/content/dam/shca/cisco/docs/p835910-shca-2023-where-find-XXX-11x8.5-cisco-digital.pdf" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #007c92;" target="_blank">Download Guide</a><br /><a href="https://8XXXXXX.org/XXX-clinics/acute-injury-program.html" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #007c92;" target="_blank">View New Program</a><br /></p>
                                            </div> </td> 
                                          <td class="mobile-spacer-gap col " height="21" width="21" style="font-size: 0;">&nbsp;</td> 
                                          <td class="mktoImg img1 col" id="img1ey2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: center; border-collapse: collapse; vertical-align: top;" mktoname="image" mktolockimgsize="true" mktolockimgstyle="true"><img class="img1" src="https://mypage.8XXXXXX.org/rs/570-RCH-758/images/cisco-q4-23-where-to-get-XXX.jpg" alt="image 2" style=" max-width: 260px; heigth:180px;" /></td> 
                                        </tr> 
                                      </tbody> 
                                    </table> 
                                    <table class="content mobile" style="display:none;border-spacing: 0; text-align: center;" role="presentation"> 
                                      <tbody> 
                                        <tr> 
                                          <td class="mktoImg img1 col" id="imgeyhbk2_" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: center; border-collapse: collapse; vertical-align: top;" mktoname="image" mktolockimgsize="true" mktolockimgstyle="true"><img class="img1" src="https://mypage.8XXXXXX.org/rs/570-RCH-758/images/cisco-q4-23-where-to-get-XXX.jpg" alt="image 2" style=" max-width: 248px; heigth:180px;" /></td> 
                                        </tr> 
                                        <tr> 
                                          <td class="mobile-spacer-gap col " height="21" style="font-size: 0;">&nbsp;</td> 
                                        </tr> 
                                        <tr class="row"> 
                                          <td class=" text col" style=" -moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #FFFFFF;font-size: 16px;line-height: 24px;border-collapse: collapse;text-align: left;vertical-align: top;"> 
                                            <div class="mktoText" mktoname="Mobile Title" id="title12_">
                                              <p class="title primary-font" style="margin-top: 0px; margin-bottom: 0px;"><span style="font-family: 'Source Serif Pro'; font-size: 22px; color: #651c32; line-height: 26px;"><a href="https://{{my.XXX life learn more:default=edit me}}" style="text-decoration: none; color: #651c32; margin: 0;">All the Places You Can Get Care</a></span></p>
                                            </div> 
                                            <div class="mktoText" mktoname="Mobile Space" id="space122_">
                                              <p style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: 8px; font-size: 8px; margin: 0;" height="8">&nbsp;</p>
                                            </div> 
                                            <div class="mktoText" mktoname="Mobile Description" id="i337_">
                                              <p class="bold secondary-font" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Source Sans Pro'; color: #000000; font-weight: 400; margin: 0;">LifeConnections Health Center offers same-day primary XXX, Monday – Saturday. Explore all your options for XXX with Stanford Medicine, including our new orthopaedic program.</p>
                                            </div> 
                                            <div class="mktoText" mktoname="Mobile Space" id="space321_">
                                              <p style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: 8px; font-size: 8px; margin: 0;" height="8">&nbsp;</p>
                                            </div> 
                                            <div class="mktoText" mktoname="Mobile Link" id="link1_">
                                              <p class="link secondary-font" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Source Sans Pro'; margin: 0;"><a href="https://{{my.XXX life learn more:default=edit me}}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #007c92;">Learn More</a><br /><a href="https://{{my.AlcoholIntoleranceViewVideo:default=edit me}}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #007c92;" target="_blank">Download Guide</a><br /><a href="https://8XXXXXX.org/XXX-clinics/acute-injury-program.html" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #007c92;" target="_blank">View New Program</a><br /></p>
                                            </div> </td> 
                                        </tr> 
                                      </tbody> 
                                    </table> </td> 
                                  <td class="mobile-spacer" width="32" style="font-size: 0;">&nbsp;</td> 
                                </tr> 
                                <tr> 
                                  <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${photoRSpacer1};font-size:${photoRSpacer1};" height="${photoRSpacer1}">&nbsp;</td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table></td> 
                </tr> 
              </tbody> 
            </table> </td> 
        </tr> 
      </tbody> 
    </table> 
    <!-- Outer Table END -->  
  </body>
</html>

It made it easy for me to look at the code for the module that you are having issues with, and equally easy to see what the problem is.

In short, the module has not been written as a mobile responsive module. It has been written as two modules in one, one that gets shown in desktop and one that gets shown in mobile. Outlook tends to remove CSS display tags when forwarding emails and hence why the mobile portion gets displayed.

If it were me, I'd rewrite the whole module to be properly mobile responsive. Check out this article on how to write a responsive layout for two columns https://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/. Actually, TBH, I'm not a fan of the way the template is written in general (I prefer table rows per module, not tables) but that's an issue for another day 🙂

mikethomasmajor · ‎12-06-2023

Hi there!

Do you know if you can use the "Forward to a friend" component to actually forward to a larger list of emails?

We have users who are receiving our emails, say a boss at a small company, and they need to forward to their employees. We are trying to find a solution for this that doesn't break out formatting and code.

Thanks

SanfordWhiteman · ‎12-06-2023

You can customize the Forward to Friend so it accepts multiple email addresses, yes. You’ll need a JS developer to make that happen, it’s pretty easy if you’re familiar with the environment.