Email Editor is Picking too much of a Module (including Background)

artur92 · ‎08-05-2024

Hey guys,

I have a question related to Marketo's Email Editor 2.0

We recently started to design our emails in Stripo and try to unlock Marketo's full email design capabilities by adding custom variables to modify the modules we declared inside the code.

While testing inside Marketo we have encountered that the Editor is not behaving the same way as it did with the previous template - instead of picking the module itself, Marketo now picks the whole section (including the background). That leads also to the settings (little gear icon) vanishing out of the viewport, so we always have to scroll horizontally to see it again.

While trying to fix this issue, I've discovered that a particular setting inside the code does change the behavior:

If we change the first "width" from 100% to 600 and the second width to 600px, the Editor is behaving like we want it to:

(Code for this is <table cellpadding="0" width="600" cellspacing="0" class="es-wrapper" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:600px;height:100%;background-color:#EBECEC">
So the first "width" is 600 without the px, the second width is 600px)

But with this change we also break the responsive view inside the editor somehow, so it doesn't make any changes to the design when we are viewing in the mobile preview (when sending a test email to Litmus, everything seems ok on mobile devices though).

Do you know what is causing this behavior and how we can fix this? I've attached a sample e-Mail with the code so you can have a look at the full code, if this helps somehow.

https://privatebin.auxaws.de/?5357c6dbe14b8b88#HXwmhfMV4QCjbiCUoDFvZoCVR5vqK88SuWa1VGU8U7Aj

Looking forward to hear from your experiences and learn something new 🙂

Thanks in advance and best regards

Artur

Disha_Goyal6 · ‎08-05-2024

Hi @artur92, I have checked your code and did changes in inside the container of the table. It works fine for me.
Please check this in your instance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="de">
<head> 
<meta charset="UTF-8" /> 
<meta content="width=device-width, initial-scale=1" name="viewport" /> 
<meta name="x-apple-disable-message-reformatting" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta content="telephone=no" name="format-detection" /> 
<meta class="mktoString" id="ButtonText" mktoname="Button Text" default="Jetzt unverbindlich anfragen" mktomodulescope="true" /> 
<meta class="mktoString" id="ButtonURL" mktoname="Button Link" default="https://www.auxmoney.com" mktomodulescope="true" /> 
<meta class="mktoString" id="ButtonUTM" mktoname="Button UTM" default="?utm_medium={{my.utm_medium}}&amp;utm_source={{my.utm_source}}&amp;utm_campaign={{my.utm_campaign}}&amp;utm_content={{my.utm_content}}&amp;utm_term=cta&amp;mkt_user={{lead.auxmoneyID}}&amp;afid={{my.afid}}" mktomodulescope="false" /> 
<title>Master Template Bugfix Session</title> 
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]--> 
<!--[if gte mso 9]>
<style>sup { font-size: 100% !important; }</style>
<![endif]--> 
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<!--[if !mso]><!-- --> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" /> 
<!--<![endif]--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<style type="text/css">
.rollover:hover .rollover-first {
max-height:0px!important;
display:none!important;
}
.rollover:hover .rollover-second {
max-height:none!important;
display:block!important;
}
.rollover span {
font-size:0px;
}
u + .body img ~ div div {
display:none;
}
#outlook a {
padding:0;
}
span.MsoHyperlink,
span.MsoHyperlinkFollowed {
color:inherit;
mso-style-priority:99;
}
a.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
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;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
td .es-button-border:hover a.es-button-2337 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-6484 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-4361 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-8074 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-4612 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-5113 {
color:#fff!important;
}
@media only screen and (max-width:600px) {.es-m-p0r { padding-right:0px!important } .es-m-p0b { padding-bottom:0px!important } .es-m-p5t { padding-top:5px!important } .es-m-p0t { padding-top:0px!important } .es-m-p20b { padding-bottom:20px!important } .es-m-p20r { padding-right:20px!important } .es-m-p15t { padding-top:15px!important } .es-m-p35t { padding-top:35px!important } .es-m-p20t { 
padding-top:20px!important } .es-m-p10b { padding-bottom:10px!important } .es-m-p5r { padding-right:5px!important } .es-m-p5b { padding-bottom:5px!important } .es-m-p10t { padding-top:10px!important } .es-p-default { } *[class="gmail-fix"] { display:none!important } p, a { line-height:150%!important } h1, h1 a { line-height:120%!important } h2, h2 a { line-height:120%!important } h3, h3 a { 
line-height:120%!important } h4, h4 a { line-height:120%!important } h5, h5 a { line-height:120%!important } h6, h6 a { line-height:120%!important } .es-header-body p { } .es-content-body p { } .es-footer-body p { } .es-infoblock p { } h1 { font-size:30px!important; text-align:left } h2 { font-size:24px!important; text-align:left } h3 { font-size:20px!important; text-align:left } h4 { 
font-size:24px!important; text-align:left } h5 { font-size:20px!important; text-align:left } h6 { font-size:16px!important; text-align:left } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:24px!important } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { 
font-size:20px!important } .es-header-body h4 a, .es-content-body h4 a, .es-footer-body h4 a { font-size:24px!important } .es-header-body h5 a, .es-content-body h5 a, .es-footer-body h5 a { font-size:20px!important } .es-header-body h6 a, .es-content-body h6 a, .es-footer-body h6 a { font-size:16px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body a { 
font-size:16px!important } .es-content-body p, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body a { font-size:16px!important } .es-infoblock p, .es-infoblock a { font-size:12px!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3, .es-m-txt-c h4, .es-m-txt-c h5, .es-m-txt-c h6 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, 
.es-m-txt-r h2, .es-m-txt-r h3, .es-m-txt-r h4, .es-m-txt-r h5, .es-m-txt-r h6 { text-align:right!important } .es-m-txt-j, .es-m-txt-j h1, .es-m-txt-j h2, .es-m-txt-j h3, .es-m-txt-j h4, .es-m-txt-j h5, .es-m-txt-j h6 { text-align:justify!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3, .es-m-txt-l h4, .es-m-txt-l h5, .es-m-txt-l h6 { text-align:left!important } .es-m-txt-r 
img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-m-txt-r .rollover:hover .rollover-second, .es-m-txt-c .rollover:hover .rollover-second, .es-m-txt-l .rollover:hover .rollover-second { display:inline!important } .es-m-txt-r .rollover span, .es-m-txt-c .rollover span, .es-m-txt-l .rollover span { line-height:0!important; font-size:0!important } .es-spacer { display:inline-table 
} a.es-button, button.es-button { font-size:18px!important; padding:10px 20px 10px 20px!important; line-height:120%!important } a.es-button, button.es-button, .es-button-border { display:inline-block!important } .es-m-fw, .es-m-fw.es-fw, .es-m-fw .es-button { display:block!important } .es-m-il, .es-m-il .es-button, .es-social, .es-social td, .es-menu { display:inline-block!important } .es-adaptive 
table, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .adapt-img { width:100%!important; height:auto!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; 
max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } .h-auto { height:auto!important } a.es-button.es-button-4361 { 
font-size:16px!important } .es-menu-7890.es-menu td a { font-size:24px!important } .es-menu-2383.es-menu td a { font-size:24px!important } .es-menu-8417.es-menu td a { font-size:24px!important } a.es-button.es-button-8074 { font-size:16px!important } a.es-button.es-button-2337 { font-size:16px!important } a.es-button.es-button-1769 { font-size:16px!important } a.es-button.es-button-1170 { 
font-size:16px!important } a.es-button.es-button-5794 { font-size:16px!important } a.es-button.es-button-2204 { font-size:16px!important } a.es-button.es-button-4224 { font-size:16px!important } a.es-button.es-button-9629 { font-size:16px!important } a.es-button.es-button-6659 { font-size:16px!important } a.es-button.es-button-8716 { font-size:16px!important } a.es-button.es-button-3575 { 
font-size:16px!important } a.es-button.es-button-2454 { font-size:16px!important } a.es-button.es-button-5991 { font-size:16px!important } a.es-button.es-button-8289 { font-size:16px!important } a.es-button.es-button-6823 { font-size:16px!important } a.es-button.es-button-5309 { font-size:16px!important } a.es-button.es-button-1450 { font-size:16px!important } a.es-button.es-button-8316 { 
font-size:16px!important } a.es-button.es-button-6649 { font-size:16px!important } a.es-button.es-button-5490 { font-size:16px!important } a.es-button.es-button-6937 { font-size:16px!important; padding:10px 20px!important } a.es-button.es-button-4888 { font-size:16px!important } .img-3922 { width:332px!important; height:auto!important } .img-5266 { width:332px!important; height:auto!important } 
.img-3392 { width:332px!important; height:auto!important } .img-7651 { width:72px!important; height:auto!important } .img-2667 { width:120px!important; height:auto!important } .es-m-w0 { width:0px!important } .es-m-w11 { width:11.11%!important } .es-m-w50 { width:50%!important } .es-text-5417 .es-text-mobile-size-16.es-override-size, .es-text-5417 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-5447 .es-text-mobile-size-16.es-override-size, .es-text-5447 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-3203 .es-text-mobile-size-16.es-override-size, .es-text-3203 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-4289 .es-text-mobile-size-16.es-override-size, .es-text-4289 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-2322 .es-text-mobile-size-16.es-override-size, .es-text-2322 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-2572 .es-text-mobile-size-16.es-override-size, 
.es-text-2572 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6225 .es-text-mobile-size-16.es-override-size, .es-text-6225 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-8689 .es-text-mobile-size-16.es-override-size, .es-text-8689 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-2539 .es-text-mobile-size-16.es-override-size, .es-text-2539 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-5503 .es-text-mobile-size-16.es-override-size, .es-text-5503 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-9243 .es-text-mobile-size-16.es-override-size, .es-text-9243 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-5953 .es-text-mobile-size-16.es-override-size, .es-text-5953 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-3368 .es-text-mobile-size-16.es-override-size, 
.es-text-3368 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-9958 .es-text-mobile-size-16.es-override-size, .es-text-9958 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6147 .es-text-mobile-size-16.es-override-size, .es-text-6147 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-9538 .es-text-mobile-size-16.es-override-size, .es-text-9538 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-7421 .es-text-mobile-size-16.es-override-size, .es-text-7421 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-7667 .es-text-mobile-size-16.es-override-size, .es-text-7667 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-7665 .es-text-mobile-size-16.es-override-size, .es-text-7665 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-8597 .es-text-mobile-size-16.es-override-size, 
.es-text-8597 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6990 .es-text-mobile-size-16.es-override-size, .es-text-6990 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-4083 .es-text-mobile-size-16.es-override-size, .es-text-4083 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-7472 .es-text-mobile-size-16.es-override-size, .es-text-7472 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-2543 .es-text-mobile-size-16.es-override-size, .es-text-2543 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-1551 .es-text-mobile-size-16.es-override-size, .es-text-1551 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-1645 .es-text-mobile-size-16.es-override-size, .es-text-1645 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-3020 .es-text-mobile-size-16.es-override-size, 
.es-text-3020 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-1065 .es-text-mobile-size-16.es-override-size, .es-text-1065 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-1026 .es-text-mobile-size-16.es-override-size, .es-text-1026 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-3108 .es-text-mobile-size-16.es-override-size, .es-text-3108 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6386 .es-text-mobile-size-14.es-override-size, .es-text-6386 .es-text-mobile-size-14.es-override-size * { font-size:14px!important; line-height:150%!important } 
.es-text-6110 .es-text-mobile-size-16.es-override-size, .es-text-6110 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-4682 .es-text-mobile-size-12.es-override-size, .es-text-4682 .es-text-mobile-size-12.es-override-size * { font-size:12px!important; line-height:150%!important } .es-text-4092 .es-text-mobile-size-12.es-override-size, 
.es-text-4092 .es-text-mobile-size-12.es-override-size * { font-size:12px!important; line-height:150%!important } .es-text-9339 .es-text-mobile-size-12.es-override-size, .es-text-9339 .es-text-mobile-size-12.es-override-size * { font-size:12px!important; line-height:150%!important } .es-text-1448 .es-text-mobile-size-12.es-override-size, .es-text-1448 .es-text-mobile-size-12.es-override-size * { 
font-size:12px!important; line-height:150%!important } td.es-spacer-5367 { height:15px!important } td.es-spacer-4207 { height:15px!important } td.es-spacer-4197 { height:15px!important } td.es-spacer-5634 { height:15px!important } td.es-spacer-2938 { height:15px!important } td.es-spacer-3212 { height:15px!important } td.es-spacer-7179 { height:15px!important } td.es-spacer-6918 { 
height:15px!important } td.es-spacer-2252 { height:15px!important } td.es-spacer-5426 { height:15px!important } td.es-spacer-4845 { height:15px!important } td.es-spacer-1907 { height:15px!important } td.es-spacer-1053 { height:15px!important } td.es-spacer-3575 { height:15px!important } td.es-spacer-5471 { height:15px!important } td.es-spacer-4739 { height:15px!important } td.es-spacer-1065 { 
height:15px!important } td.es-spacer-2542 { height:15px!important } td.es-spacer-7361 { height:15px!important } td.es-spacer-5498 { height:15px!important } td.es-spacer-5910 { height:15px!important } td.es-spacer-7524 { height:15px!important } td.es-spacer-1609 { height:15px!important } td.es-spacer-5061 { height:15px!important } td.es-spacer-9813 { height:15px!important } td.es-spacer-4864 { 
height:15px!important } td.es-spacer-9585 { height:15px!important } td.es-spacer-3167 { height:15px!important } td.es-spacer-6149 { height:15px!important } td.es-spacer-6994 { height:15px!important } td.es-spacer-6724 { height:15px!important } td.es-spacer-8451 { height:15px!important } .es-text-6399 .es-text-mobile-size-16.es-override-size, .es-text-6399 .es-text-mobile-size-16.es-override-size * 
{ font-size:16px!important; line-height:150%!important } td.es-spacer-3307 { height:15px!important } td.es-spacer-8459 { height:15px!important } td.es-spacer-1818 { height:15px!important } td.es-spacer-6427 { height:15px!important } td.es-spacer-3473 { height:15px!important } td.es-spacer-4636 { height:15px!important } } 
@media screen and (max-width:384px) {.mail-message-content { width:414px!important } }
</style> 
</head> 
<body class="body" style="width:100%;height:100%;padding:0;Margin:0"> 
<div dir="ltr" class="es-wrapper-color" lang="de" style="background-color:#EBECEC"> 
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#ebecec" ></v:fill>
</v:background>
<![endif]--> 
<table cellpadding="0" width="100%" cellspacing="0" class="es-wrapper" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-color:#EBECEC"> 
<tbody> 
<tr> 
<td class="mktoContainer" id="container" valign="top" style="padding:0;Margin:0">
<table cellspacing="0" cellpadding="0" align="center" class="mktoModule es-header" id="auxlogo" mktoname="Logo" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:600px;table-layout:fixed !important;background-color:transparent;background-repeat:repeat;background-position:center top"> 
<tbody> 
<tr> 
<td align="center" bgcolor="#ebecec" style="padding:0;Margin:0;background-color:#ebecec"> 
<table cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" class="es-header-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#ffffff;width:600px" role="none"> 
<tbody> 
<tr> 
<td align="left" style="padding:20px;Margin:0"> 
<table width="100%" cellpadding="0" cellspacing="0" align="right" class="es-right" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right"> 
<tbody> 
<tr> 
<td align="center" valign="top" style="padding:0;Margin:0;width:560px"> 
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td align="left" style="padding:0;Margin:0;font-size:0px"> 
<div class="mktoImg" id="logo-img" mktoname="Logo Image">
<a href="https://www.auxmoney.com?utm_medium={{my.utm_medium}}&amp;utm_source={{my.utm_source}}&amp;utm_campaign={{my.utm_campaign}}&amp;utm_content={{my.utm_content}}&amp;utm_term=logo&amp;mkt_user={{lead.auxmoneyID}}&amp;afid={{my.afid}}"><img src="https://info.auxmoney.com/rs/081-ZTK-566/images/auxmoney_logo_182px.png" width="183" height="50" alt="auxmoney Logo" style="display:block;font-size:16px;border:0;outline:none;text-decoration:none" /></a>
</div> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table>
<table cellspacing="0" cellpadding="0" align="center" class="mktoModule es-content" width="600" id="textblock-6" mktoname="Heading, Text, Image, CTA" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:600px;table-layout:fixed !important"> 
<tbody> 
<tr> 
<td align="center" bgcolor="#ebecec" style="padding:0;Margin:0;background-color:#ebecec"> 
<table align="center" cellspacing="0" cellpadding="0" bgcolor="#fff" class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#fff;width:600px" role="none"> 
<tbody> 
<tr> 
<td align="left" style="padding:0;Margin:0;padding-right:20px;padding-left:20px"> 
<table cellspacing="0" cellpadding="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td valign="top" align="center" style="padding:0;Margin:0;width:560px"> 
<table cellpadding="0" width="100%" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td align="center" height="20" class="es-spacer-1907" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-6003" id="textblock-6-heading" mktoname="Heading" style="padding:0;Margin:0"><h2 style="Margin:0;font-family:georgia, times, 'times new roman', serif;mso-line-height-rule:exactly;letter-spacing:0px;font-size:28px;font-style:normal;font-weight:bold;line-height:42px;color:#0083AC">Dein Wunschbetrag steht bereit</h2></td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-7472" id="textblock-6-text-1" mktoname="Text 1" style="padding:0;Margin:0"><p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;">Hallo {{lead.First Name}} {{lead.Last Name}},</p> <p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;"><br /></p> <p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;"><br /></p></td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-5471" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="center" style="padding:0;Margin:0;font-size:0"> 
<div class="mktoImg" id="textblock-6-img" mktoname="Image">
<a href="https://www.auxmoney.com?utm_medium={{my.utm_medium}}&amp;utm_source={{my.utm_source}}&amp;utm_campaign={{my.utm_campaign}}&amp;utm_content={{my.utm_content}}&amp;utm_term=img&amp;mkt_user={{lead.auxmoneyID}}&amp;afid={{my.afid}}"><img src="https://auxmail.s3.eu-central-1.amazonaws.com/CLC/E-Mail+Rebrand/Quartals_Newsletter/Images/Newsletter_Artikelimage_Muster.jpg" width="552" height="256" alt="Bildgrafik" class="img-3922" style="display:block;font-size:16px;border:0;outline:none;text-decoration:none" /></a>
</div> </td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-4739" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-4083" id="textblock-6-text-2" mktoname="Text 2" style="padding:0;Margin:0"><p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-6994" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="left" class="es-content" style="padding:0;Margin:0;width:100%;table-layout:fixed !important"> 
<!--[if mso]><a href="${ButtonURL}${ButtonUTM}" target="_blank" hidden>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" esdevVmlButton href="${ButtonURL}${ButtonUTM}" style="height:39px; v-text-anchor:middle; width:153px" arcsize="50%" stroke="f" fillcolor="#f34c7f">
<w:anchorlock></w:anchorlock>
<center style='color:#ffffff; font-family:"open sans", "helvetica neue", helvetica, arial, sans-serif; font-size:14px; font-weight:700; line-height:14px; mso-text-raise:1px'>${ButtonText}</center>
</v:roundrect></a>
<![endif]--> 
<!--[if !mso]--> 
<!-- --><span class="es-button-border msohide" style="border-style:solid;border-color:#F34C7F #F34C7F #F34C7F #f34c7f;background:#f34c7f;border-width:0px;display:inline-block;border-radius:28px;width:auto;mso-hide:all"><a target="_blank" href="${ButtonURL}${ButtonUTM}" class="es-button es-button-4224" style="mso-style-priority:100 !important;text-decoration:none 
!important;mso-line-height-rule:exactly;color:#FFFFFF;font-size:16px;padding:16px 35px;display:inline-block;background:#f34c7f;border-radius:28px;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif;font-weight:bold;font-style:normal;line-height:19px;width:auto;text-align:center;letter-spacing:0;mso-padding-alt:0;mso-border-alt:10px solid 
#f34c7f">${ButtonText}</a></span> 
<!--<![endif]--></td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-8451" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table>
<table cellspacing="0" cellpadding="0" align="center" width="600" class="mktoModule es-content" id="footer-marketing" mktoname="Footer (Marketing)" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:600px;table-layout:fixed !important"> 
<tbody> 
<tr> 
<td bgcolor="#ebecec" align="center" style="padding:0;Margin:0;background-color:#ebecec"> 
<table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" class="es-footer-body" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px"> 
<tbody> 
<tr> 
<td align="left" style="padding:0;Margin:0;padding-right:20px;padding-left:20px;padding-top:20px"> 
<table cellpadding="0" cellspacing="0" width="100%" align="right" class="es-right" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right"> 
<tbody> 
<tr> 
<td align="center" valign="top" style="padding:0;Margin:0;width:560px"> 
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td align="left" class="es-text-4092" style="padding:0;Margin:0"> <p class="es-text-mobile-size-12 es-override-size" style="Margin:0;mso-line-height-rule:exactly;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif;line-height:18px;letter-spacing:0;color:#8a8f8e;font-size:12px">{{my.impressum}}</p> </td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-4682" id="footer-marketing-text" mktoname="Text" style="padding:0;Margin:0"><p class="es-text-mobile-size-12 es-override-size" style="Margin:0;mso-line-height-rule:exactly;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif;line-height:18px;letter-spacing:0;color:#8a8f8e;font-size:12px">Du hast diese E-Mail erhalten, weil Du mit {{lead.Email Address}} bei auxmoney angemeldet bist und dem Erhalt von Werbung per E-Mail zugestimmt hast. Solltest Du keine weiteren Newsletter mehr erhalten wollen, kannst Du Deine Einstellungen jederzeit ändern: <strong><u><a href="http://info.auxmoney.com/Pref_KN_Basis.html" target="blank" style="mso-line-height-rule:exactly;text-decoration:none;color:#8a8f8e;font-size:12px;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif">Newsletter abbestellen</a></u></strong>&nbsp;|&nbsp;Diese E-Mail hat keine Bilder?<a href="http://info.auxmoney.com/index.php/email/emailWebview?mkt_tok=##MKT_TOK##" target="blank" style="mso-line-height-rule:exactly;text-decoration:none;color:#8a8f8e;font-size:12px;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif"> <u><strong>Bitte hier klicken</strong></u></a>.</p></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table></td> 
</tr> 
</tbody> 
</table> 
</div> 
</body>
</html>

Let me know if you still face any issue.

Thanks,

Disha

View solution in original post

Disha_Goyal6 · ‎08-05-2024

Hi @artur92, I have checked your code and did changes in inside the container of the table. It works fine for me.
Please check this in your instance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="de">
<head> 
<meta charset="UTF-8" /> 
<meta content="width=device-width, initial-scale=1" name="viewport" /> 
<meta name="x-apple-disable-message-reformatting" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta content="telephone=no" name="format-detection" /> 
<meta class="mktoString" id="ButtonText" mktoname="Button Text" default="Jetzt unverbindlich anfragen" mktomodulescope="true" /> 
<meta class="mktoString" id="ButtonURL" mktoname="Button Link" default="https://www.auxmoney.com" mktomodulescope="true" /> 
<meta class="mktoString" id="ButtonUTM" mktoname="Button UTM" default="?utm_medium={{my.utm_medium}}&amp;utm_source={{my.utm_source}}&amp;utm_campaign={{my.utm_campaign}}&amp;utm_content={{my.utm_content}}&amp;utm_term=cta&amp;mkt_user={{lead.auxmoneyID}}&amp;afid={{my.afid}}" mktomodulescope="false" /> 
<title>Master Template Bugfix Session</title> 
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]--> 
<!--[if gte mso 9]>
<style>sup { font-size: 100% !important; }</style>
<![endif]--> 
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<!--[if !mso]><!-- --> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" /> 
<!--<![endif]--> 
<!--[if mso]>
<style type="text/css">
ul {
margin: 0 !important;
}
ol {
margin: 0 !important;
}
li {
margin-left: 47px !important;
}
</style>
<![endif]
--> 
<style type="text/css">
.rollover:hover .rollover-first {
max-height:0px!important;
display:none!important;
}
.rollover:hover .rollover-second {
max-height:none!important;
display:block!important;
}
.rollover span {
font-size:0px;
}
u + .body img ~ div div {
display:none;
}
#outlook a {
padding:0;
}
span.MsoHyperlink,
span.MsoHyperlinkFollowed {
color:inherit;
mso-style-priority:99;
}
a.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
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;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
td .es-button-border:hover a.es-button-2337 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-6484 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-4361 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-8074 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-4612 {
color:#fff!important;
}
td .es-button-border:hover a.es-button-5113 {
color:#fff!important;
}
@media only screen and (max-width:600px) {.es-m-p0r { padding-right:0px!important } .es-m-p0b { padding-bottom:0px!important } .es-m-p5t { padding-top:5px!important } .es-m-p0t { padding-top:0px!important } .es-m-p20b { padding-bottom:20px!important } .es-m-p20r { padding-right:20px!important } .es-m-p15t { padding-top:15px!important } .es-m-p35t { padding-top:35px!important } .es-m-p20t { 
padding-top:20px!important } .es-m-p10b { padding-bottom:10px!important } .es-m-p5r { padding-right:5px!important } .es-m-p5b { padding-bottom:5px!important } .es-m-p10t { padding-top:10px!important } .es-p-default { } *[class="gmail-fix"] { display:none!important } p, a { line-height:150%!important } h1, h1 a { line-height:120%!important } h2, h2 a { line-height:120%!important } h3, h3 a { 
line-height:120%!important } h4, h4 a { line-height:120%!important } h5, h5 a { line-height:120%!important } h6, h6 a { line-height:120%!important } .es-header-body p { } .es-content-body p { } .es-footer-body p { } .es-infoblock p { } h1 { font-size:30px!important; text-align:left } h2 { font-size:24px!important; text-align:left } h3 { font-size:20px!important; text-align:left } h4 { 
font-size:24px!important; text-align:left } h5 { font-size:20px!important; text-align:left } h6 { font-size:16px!important; text-align:left } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:24px!important } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { 
font-size:20px!important } .es-header-body h4 a, .es-content-body h4 a, .es-footer-body h4 a { font-size:24px!important } .es-header-body h5 a, .es-content-body h5 a, .es-footer-body h5 a { font-size:20px!important } .es-header-body h6 a, .es-content-body h6 a, .es-footer-body h6 a { font-size:16px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body a { 
font-size:16px!important } .es-content-body p, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body a { font-size:16px!important } .es-infoblock p, .es-infoblock a { font-size:12px!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3, .es-m-txt-c h4, .es-m-txt-c h5, .es-m-txt-c h6 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, 
.es-m-txt-r h2, .es-m-txt-r h3, .es-m-txt-r h4, .es-m-txt-r h5, .es-m-txt-r h6 { text-align:right!important } .es-m-txt-j, .es-m-txt-j h1, .es-m-txt-j h2, .es-m-txt-j h3, .es-m-txt-j h4, .es-m-txt-j h5, .es-m-txt-j h6 { text-align:justify!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3, .es-m-txt-l h4, .es-m-txt-l h5, .es-m-txt-l h6 { text-align:left!important } .es-m-txt-r 
img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-m-txt-r .rollover:hover .rollover-second, .es-m-txt-c .rollover:hover .rollover-second, .es-m-txt-l .rollover:hover .rollover-second { display:inline!important } .es-m-txt-r .rollover span, .es-m-txt-c .rollover span, .es-m-txt-l .rollover span { line-height:0!important; font-size:0!important } .es-spacer { display:inline-table 
} a.es-button, button.es-button { font-size:18px!important; padding:10px 20px 10px 20px!important; line-height:120%!important } a.es-button, button.es-button, .es-button-border { display:inline-block!important } .es-m-fw, .es-m-fw.es-fw, .es-m-fw .es-button { display:block!important } .es-m-il, .es-m-il .es-button, .es-social, .es-social td, .es-menu { display:inline-block!important } .es-adaptive 
table, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .adapt-img { width:100%!important; height:auto!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; 
max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } .h-auto { height:auto!important } a.es-button.es-button-4361 { 
font-size:16px!important } .es-menu-7890.es-menu td a { font-size:24px!important } .es-menu-2383.es-menu td a { font-size:24px!important } .es-menu-8417.es-menu td a { font-size:24px!important } a.es-button.es-button-8074 { font-size:16px!important } a.es-button.es-button-2337 { font-size:16px!important } a.es-button.es-button-1769 { font-size:16px!important } a.es-button.es-button-1170 { 
font-size:16px!important } a.es-button.es-button-5794 { font-size:16px!important } a.es-button.es-button-2204 { font-size:16px!important } a.es-button.es-button-4224 { font-size:16px!important } a.es-button.es-button-9629 { font-size:16px!important } a.es-button.es-button-6659 { font-size:16px!important } a.es-button.es-button-8716 { font-size:16px!important } a.es-button.es-button-3575 { 
font-size:16px!important } a.es-button.es-button-2454 { font-size:16px!important } a.es-button.es-button-5991 { font-size:16px!important } a.es-button.es-button-8289 { font-size:16px!important } a.es-button.es-button-6823 { font-size:16px!important } a.es-button.es-button-5309 { font-size:16px!important } a.es-button.es-button-1450 { font-size:16px!important } a.es-button.es-button-8316 { 
font-size:16px!important } a.es-button.es-button-6649 { font-size:16px!important } a.es-button.es-button-5490 { font-size:16px!important } a.es-button.es-button-6937 { font-size:16px!important; padding:10px 20px!important } a.es-button.es-button-4888 { font-size:16px!important } .img-3922 { width:332px!important; height:auto!important } .img-5266 { width:332px!important; height:auto!important } 
.img-3392 { width:332px!important; height:auto!important } .img-7651 { width:72px!important; height:auto!important } .img-2667 { width:120px!important; height:auto!important } .es-m-w0 { width:0px!important } .es-m-w11 { width:11.11%!important } .es-m-w50 { width:50%!important } .es-text-5417 .es-text-mobile-size-16.es-override-size, .es-text-5417 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-5447 .es-text-mobile-size-16.es-override-size, .es-text-5447 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-3203 .es-text-mobile-size-16.es-override-size, .es-text-3203 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-4289 .es-text-mobile-size-16.es-override-size, .es-text-4289 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-2322 .es-text-mobile-size-16.es-override-size, .es-text-2322 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-2572 .es-text-mobile-size-16.es-override-size, 
.es-text-2572 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6225 .es-text-mobile-size-16.es-override-size, .es-text-6225 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-8689 .es-text-mobile-size-16.es-override-size, .es-text-8689 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-2539 .es-text-mobile-size-16.es-override-size, .es-text-2539 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-5503 .es-text-mobile-size-16.es-override-size, .es-text-5503 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-9243 .es-text-mobile-size-16.es-override-size, .es-text-9243 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-5953 .es-text-mobile-size-16.es-override-size, .es-text-5953 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-3368 .es-text-mobile-size-16.es-override-size, 
.es-text-3368 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-9958 .es-text-mobile-size-16.es-override-size, .es-text-9958 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6147 .es-text-mobile-size-16.es-override-size, .es-text-6147 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-9538 .es-text-mobile-size-16.es-override-size, .es-text-9538 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-7421 .es-text-mobile-size-16.es-override-size, .es-text-7421 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-7667 .es-text-mobile-size-16.es-override-size, .es-text-7667 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-7665 .es-text-mobile-size-16.es-override-size, .es-text-7665 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-8597 .es-text-mobile-size-16.es-override-size, 
.es-text-8597 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6990 .es-text-mobile-size-16.es-override-size, .es-text-6990 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-4083 .es-text-mobile-size-16.es-override-size, .es-text-4083 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-7472 .es-text-mobile-size-16.es-override-size, .es-text-7472 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-2543 .es-text-mobile-size-16.es-override-size, .es-text-2543 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } 
.es-text-1551 .es-text-mobile-size-16.es-override-size, .es-text-1551 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-1645 .es-text-mobile-size-16.es-override-size, .es-text-1645 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-3020 .es-text-mobile-size-16.es-override-size, 
.es-text-3020 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-1065 .es-text-mobile-size-16.es-override-size, .es-text-1065 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-1026 .es-text-mobile-size-16.es-override-size, .es-text-1026 .es-text-mobile-size-16.es-override-size * { 
font-size:16px!important; line-height:150%!important } .es-text-3108 .es-text-mobile-size-16.es-override-size, .es-text-3108 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-6386 .es-text-mobile-size-14.es-override-size, .es-text-6386 .es-text-mobile-size-14.es-override-size * { font-size:14px!important; line-height:150%!important } 
.es-text-6110 .es-text-mobile-size-16.es-override-size, .es-text-6110 .es-text-mobile-size-16.es-override-size * { font-size:16px!important; line-height:150%!important } .es-text-4682 .es-text-mobile-size-12.es-override-size, .es-text-4682 .es-text-mobile-size-12.es-override-size * { font-size:12px!important; line-height:150%!important } .es-text-4092 .es-text-mobile-size-12.es-override-size, 
.es-text-4092 .es-text-mobile-size-12.es-override-size * { font-size:12px!important; line-height:150%!important } .es-text-9339 .es-text-mobile-size-12.es-override-size, .es-text-9339 .es-text-mobile-size-12.es-override-size * { font-size:12px!important; line-height:150%!important } .es-text-1448 .es-text-mobile-size-12.es-override-size, .es-text-1448 .es-text-mobile-size-12.es-override-size * { 
font-size:12px!important; line-height:150%!important } td.es-spacer-5367 { height:15px!important } td.es-spacer-4207 { height:15px!important } td.es-spacer-4197 { height:15px!important } td.es-spacer-5634 { height:15px!important } td.es-spacer-2938 { height:15px!important } td.es-spacer-3212 { height:15px!important } td.es-spacer-7179 { height:15px!important } td.es-spacer-6918 { 
height:15px!important } td.es-spacer-2252 { height:15px!important } td.es-spacer-5426 { height:15px!important } td.es-spacer-4845 { height:15px!important } td.es-spacer-1907 { height:15px!important } td.es-spacer-1053 { height:15px!important } td.es-spacer-3575 { height:15px!important } td.es-spacer-5471 { height:15px!important } td.es-spacer-4739 { height:15px!important } td.es-spacer-1065 { 
height:15px!important } td.es-spacer-2542 { height:15px!important } td.es-spacer-7361 { height:15px!important } td.es-spacer-5498 { height:15px!important } td.es-spacer-5910 { height:15px!important } td.es-spacer-7524 { height:15px!important } td.es-spacer-1609 { height:15px!important } td.es-spacer-5061 { height:15px!important } td.es-spacer-9813 { height:15px!important } td.es-spacer-4864 { 
height:15px!important } td.es-spacer-9585 { height:15px!important } td.es-spacer-3167 { height:15px!important } td.es-spacer-6149 { height:15px!important } td.es-spacer-6994 { height:15px!important } td.es-spacer-6724 { height:15px!important } td.es-spacer-8451 { height:15px!important } .es-text-6399 .es-text-mobile-size-16.es-override-size, .es-text-6399 .es-text-mobile-size-16.es-override-size * 
{ font-size:16px!important; line-height:150%!important } td.es-spacer-3307 { height:15px!important } td.es-spacer-8459 { height:15px!important } td.es-spacer-1818 { height:15px!important } td.es-spacer-6427 { height:15px!important } td.es-spacer-3473 { height:15px!important } td.es-spacer-4636 { height:15px!important } } 
@media screen and (max-width:384px) {.mail-message-content { width:414px!important } }
</style> 
</head> 
<body class="body" style="width:100%;height:100%;padding:0;Margin:0"> 
<div dir="ltr" class="es-wrapper-color" lang="de" style="background-color:#EBECEC"> 
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#ebecec" ></v:fill>
</v:background>
<![endif]--> 
<table cellpadding="0" width="100%" cellspacing="0" class="es-wrapper" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-color:#EBECEC"> 
<tbody> 
<tr> 
<td class="mktoContainer" id="container" valign="top" style="padding:0;Margin:0">
<table cellspacing="0" cellpadding="0" align="center" class="mktoModule es-header" id="auxlogo" mktoname="Logo" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:600px;table-layout:fixed !important;background-color:transparent;background-repeat:repeat;background-position:center top"> 
<tbody> 
<tr> 
<td align="center" bgcolor="#ebecec" style="padding:0;Margin:0;background-color:#ebecec"> 
<table cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" class="es-header-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#ffffff;width:600px" role="none"> 
<tbody> 
<tr> 
<td align="left" style="padding:20px;Margin:0"> 
<table width="100%" cellpadding="0" cellspacing="0" align="right" class="es-right" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right"> 
<tbody> 
<tr> 
<td align="center" valign="top" style="padding:0;Margin:0;width:560px"> 
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td align="left" style="padding:0;Margin:0;font-size:0px"> 
<div class="mktoImg" id="logo-img" mktoname="Logo Image">
<a href="https://www.auxmoney.com?utm_medium={{my.utm_medium}}&amp;utm_source={{my.utm_source}}&amp;utm_campaign={{my.utm_campaign}}&amp;utm_content={{my.utm_content}}&amp;utm_term=logo&amp;mkt_user={{lead.auxmoneyID}}&amp;afid={{my.afid}}"><img src="https://info.auxmoney.com/rs/081-ZTK-566/images/auxmoney_logo_182px.png" width="183" height="50" alt="auxmoney Logo" style="display:block;font-size:16px;border:0;outline:none;text-decoration:none" /></a>
</div> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table>
<table cellspacing="0" cellpadding="0" align="center" class="mktoModule es-content" width="600" id="textblock-6" mktoname="Heading, Text, Image, CTA" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:600px;table-layout:fixed !important"> 
<tbody> 
<tr> 
<td align="center" bgcolor="#ebecec" style="padding:0;Margin:0;background-color:#ebecec"> 
<table align="center" cellspacing="0" cellpadding="0" bgcolor="#fff" class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#fff;width:600px" role="none"> 
<tbody> 
<tr> 
<td align="left" style="padding:0;Margin:0;padding-right:20px;padding-left:20px"> 
<table cellspacing="0" cellpadding="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td valign="top" align="center" style="padding:0;Margin:0;width:560px"> 
<table cellpadding="0" width="100%" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td align="center" height="20" class="es-spacer-1907" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-6003" id="textblock-6-heading" mktoname="Heading" style="padding:0;Margin:0"><h2 style="Margin:0;font-family:georgia, times, 'times new roman', serif;mso-line-height-rule:exactly;letter-spacing:0px;font-size:28px;font-style:normal;font-weight:bold;line-height:42px;color:#0083AC">Dein Wunschbetrag steht bereit</h2></td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-7472" id="textblock-6-text-1" mktoname="Text 1" style="padding:0;Margin:0"><p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;">Hallo {{lead.First Name}} {{lead.Last Name}},</p> <p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;"><br /></p> <p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;"><br /></p></td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-5471" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="center" style="padding:0;Margin:0;font-size:0"> 
<div class="mktoImg" id="textblock-6-img" mktoname="Image">
<a href="https://www.auxmoney.com?utm_medium={{my.utm_medium}}&amp;utm_source={{my.utm_source}}&amp;utm_campaign={{my.utm_campaign}}&amp;utm_content={{my.utm_content}}&amp;utm_term=img&amp;mkt_user={{lead.auxmoneyID}}&amp;afid={{my.afid}}"><img src="https://auxmail.s3.eu-central-1.amazonaws.com/CLC/E-Mail+Rebrand/Quartals_Newsletter/Images/Newsletter_Artikelimage_Muster.jpg" width="552" height="256" alt="Bildgrafik" class="img-3922" style="display:block;font-size:16px;border:0;outline:none;text-decoration:none" /></a>
</div> </td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-4739" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-4083" id="textblock-6-text-2" mktoname="Text 2" style="padding:0;Margin:0"><p class="es-text-mobile-size-16 es-override-size" style="margin: 0; mso-line-height-rule: exactly; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; line-height: 24px; letter-spacing: 0; color: #3c4543; font-size: 16px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-6994" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
<tr> 
<td align="left" class="es-content" style="padding:0;Margin:0;width:100%;table-layout:fixed !important"> 
<!--[if mso]><a href="${ButtonURL}${ButtonUTM}" target="_blank" hidden>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" esdevVmlButton href="${ButtonURL}${ButtonUTM}" style="height:39px; v-text-anchor:middle; width:153px" arcsize="50%" stroke="f" fillcolor="#f34c7f">
<w:anchorlock></w:anchorlock>
<center style='color:#ffffff; font-family:"open sans", "helvetica neue", helvetica, arial, sans-serif; font-size:14px; font-weight:700; line-height:14px; mso-text-raise:1px'>${ButtonText}</center>
</v:roundrect></a>
<![endif]--> 
<!--[if !mso]--> 
<!-- --><span class="es-button-border msohide" style="border-style:solid;border-color:#F34C7F #F34C7F #F34C7F #f34c7f;background:#f34c7f;border-width:0px;display:inline-block;border-radius:28px;width:auto;mso-hide:all"><a target="_blank" href="${ButtonURL}${ButtonUTM}" class="es-button es-button-4224" style="mso-style-priority:100 !important;text-decoration:none 
!important;mso-line-height-rule:exactly;color:#FFFFFF;font-size:16px;padding:16px 35px;display:inline-block;background:#f34c7f;border-radius:28px;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif;font-weight:bold;font-style:normal;line-height:19px;width:auto;text-align:center;letter-spacing:0;mso-padding-alt:0;mso-border-alt:10px solid 
#f34c7f">${ButtonText}</a></span> 
<!--<![endif]--></td> 
</tr> 
<tr> 
<td align="center" height="20" class="es-spacer-8451" style="padding:0;Margin:0;font-size:0"></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table>
<table cellspacing="0" cellpadding="0" align="center" width="600" class="mktoModule es-content" id="footer-marketing" mktoname="Footer (Marketing)" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:600px;table-layout:fixed !important"> 
<tbody> 
<tr> 
<td bgcolor="#ebecec" align="center" style="padding:0;Margin:0;background-color:#ebecec"> 
<table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" class="es-footer-body" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px"> 
<tbody> 
<tr> 
<td align="left" style="padding:0;Margin:0;padding-right:20px;padding-left:20px;padding-top:20px"> 
<table cellpadding="0" cellspacing="0" width="100%" align="right" class="es-right" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right"> 
<tbody> 
<tr> 
<td align="center" valign="top" style="padding:0;Margin:0;width:560px"> 
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
<tbody> 
<tr> 
<td align="left" class="es-text-4092" style="padding:0;Margin:0"> <p class="es-text-mobile-size-12 es-override-size" style="Margin:0;mso-line-height-rule:exactly;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif;line-height:18px;letter-spacing:0;color:#8a8f8e;font-size:12px">{{my.impressum}}</p> </td> 
</tr> 
<tr> 
<td align="left" class="mktoText es-text-4682" id="footer-marketing-text" mktoname="Text" style="padding:0;Margin:0"><p class="es-text-mobile-size-12 es-override-size" style="Margin:0;mso-line-height-rule:exactly;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif;line-height:18px;letter-spacing:0;color:#8a8f8e;font-size:12px">Du hast diese E-Mail erhalten, weil Du mit {{lead.Email Address}} bei auxmoney angemeldet bist und dem Erhalt von Werbung per E-Mail zugestimmt hast. Solltest Du keine weiteren Newsletter mehr erhalten wollen, kannst Du Deine Einstellungen jederzeit ändern: <strong><u><a href="http://info.auxmoney.com/Pref_KN_Basis.html" target="blank" style="mso-line-height-rule:exactly;text-decoration:none;color:#8a8f8e;font-size:12px;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif">Newsletter abbestellen</a></u></strong>&nbsp;|&nbsp;Diese E-Mail hat keine Bilder?<a href="http://info.auxmoney.com/index.php/email/emailWebview?mkt_tok=##MKT_TOK##" target="blank" style="mso-line-height-rule:exactly;text-decoration:none;color:#8a8f8e;font-size:12px;font-family:'open sans', 'helvetica neue', helvetica, arial, sans-serif"> <u><strong>Bitte hier klicken</strong></u></a>.</p></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table></td> 
</tr> 
</tbody> 
</table> 
</div> 
</body>
</html>

Let me know if you still face any issue.

Thanks,

Disha

artur92 · ‎08-06-2024

Hi Disha,

thank you very much for the adjusted code snippet! I've checked it and it looks fine 🙂

Just to make sure so I can understand what exactly has been changed: If I compare it right, you changed the "width:600px" inside every table to "width:100%" instead, right? (Just by using the search & replace function I guess)

We have to adapt this edit to our Master Template so I want to make sure that I'm not forgetting any setting 🙂

Disha_Goyal6 · ‎08-06-2024

@artur92, yes correct. I did the changes inside the container.

Email Editor is Picking too much of a Module (including Background)

Email Editor is Picking too much of a Module (including Background)

Re: Email Editor is Picking too much of a Module (including Background)

Re: Email Editor is Picking too much of a Module (including Background)

Re: Email Editor is Picking too much of a Module (including Background)

Re: Email Editor is Picking too much of a Module (including Background)