Comments (8)
iRyusa
commented on September 26, 2024
Just checked out and it looks to be fine on my end with the exact same MJML:
What version of MJML are you using ? The output HTML seems to differ a lot from what I get in the try it live
from mjml.
eichenlauba
commented on September 26, 2024
Thank you for your reply.
I use https://github.com/PrestaShop/mjml-theme-converter to convert my mjml files to html/twig files compatible with prestashop.
From what I see in the tool, it uses MJML version 4.10.3.
"mjml": {
"version": "4.10.3",
"resolved": "https://registry.npmjs.org/mjml/-/mjml-4.10.3.tgz",
"integrity": "sha512-OIvguBJbsgVtUJKcLbipZJ/QqnK1fexQelpOxe2XW6sHIc8nHyISshmbf8t8q1xI9UUNsk3FrMUy3Tqb1MzJBg==",
"requires": {
"@babel/runtime": "^7.14.6",
"mjml-cli": "4.10.3",
"mjml-core": "4.10.3",
"mjml-migrate": "4.10.3",
"mjml-preset-core": "4.10.3",
"mjml-validator": "4.10.3"
}
},
from mjml.
iRyusa
commented on September 26, 2024
Can you try with more recent version 4.10 is a bit old
from mjml.
eichenlauba
commented on September 26, 2024
just checkout out with version 4.14.1 : same bug..
The 4.15 version not seem to work with my converting tool.
from mjml.
eichenlauba
commented on September 26, 2024
same on 4.15.2 (latest release..)
from mjml.
iRyusa
commented on September 26, 2024
Tried to reproduce on my end but couldn't. Are you sure your lib doesn't alter the html output in any way ?
This is the HTML produced with latest MJML version:
<!doctype html>
<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>{% block title %}Title{% endblock %}</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Hanken+Grotesk:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Hanken+Grotesk:300,300i,400,400i,600,600i,700,700i,800,800i);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.mj-column-per-65 {
width: 65% !important;
max-width: 65%;
}
.mj-column-per-35 {
width: 35% !important;
max-width: 35%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.moz-text-html .mj-column-per-65 {
width: 65% !important;
max-width: 65%;
}
.moz-text-html .mj-column-per-35 {
width: 35% !important;
max-width: 35%;
}
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
.shadow {
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1);
}
.label {
font-weight: 700;
}
.warning {
font-weight: 700;
font-size: 16px;
}
a {
color: #1CB227;
text-decoration: none;
font-weight: 600;
}
a.light {
font-weight: 400;
}
span.strong {
font-weight: 600;
}
.mj-column-per-35 {
width: 35% !important;
}
.mj-column-per-65 {
width: 65% !important;
}
.br_20 {
border-radius: 20px !important;
border: 1px solid #E0E0EA !important;
background-color: rgba(244, 206, 195, 0.2) !important;
}
.br_20_blue {
border-radius: 20px !important;
border: 1px solid #E0E0EA !important;
background-color: #F4F9FB !important;
}
.br_20_top {
border-bottom: 0 !important;
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.br_20_bottom {
border-bottom-left-radius: 20px !important;
border-bottom-right-radius: 20px !important;
border: 1px solid #E0E0EA !important;
border-top: 0 !important
}
.padding-mobile>table>tbody>tr>td {
@media(max-width:768px) {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
.padding-mobile-24>table>tbody>tr>td {
@media(max-width:768px) {
padding-top: 24px !important;
padding-bottom: 24px !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
}
</style>
</head>
<body style="word-spacing:normal;background-color:#E0E0EA;">
<div style="background-color:#E0E0EA;" lang="und" dir="auto">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:604px;" width="604" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:604px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div style="height:40px;line-height:40px;"> </div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="shadow-outlook wrapper-container-outlook" role="presentation" style="width:604px;" width="604" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="shadow wrapper-container" style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:4px;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 0 30px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
<!-- LOGO BEGINING -->
<!--[if mso | IE]><tr><td class="padding-mobile-outlook" width="604px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="padding-mobile-outlook" role="presentation" style="width:604px;" width="604" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="padding-mobile" style="margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:48px 40px 40px 40px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:524px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:150px;">
<a href="{shop_url}" target="_blank">
<img alt="" src="{{ mailThemesUrl }}/auditionet_2024/assets/logo.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="150" height="auto" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
<!-- LOGO ENDING -->
<!--[if mso | IE]><tr><td class="padding-mobile-outlook" width="604px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="padding-mobile-outlook" role="presentation" style="width:604px;" width="604" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="padding-mobile" style="margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 40px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:524px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" class="mj-full-width-mobile">
<tbody>
<tr>
<td style="width:524px;" class="mj-full-width-mobile">
<img alt="" src="{{ mailThemesUrl }}/auditionet_2024/assets/illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="524" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- TITLE BEGINING -->
<tr>
<td align="left" style="font-size:0px;padding:0 0 10px 0;padding-top:40px;padding-bottom:24px;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:32px;font-weight:700;line-height:40px;text-align:left;color:#0A0A0F;">{{ 'Welcome to {shop_name}!'|trans({}, 'Emails.Body', locale) }}</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:16px;line-height:24px;text-align:left;color:#0A0A0F;">{{ 'Hi {firstname} {lastname},'|trans({}, 'Emails.Body', locale) }}</div>
</td>
</tr>
<!-- TITLE ENDING -->
<tr>
<td align="left" style="font-size:0px;padding:10px 0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:16px;line-height:24px;text-align:left;color:#0A0A0F;">Depuis 10 ans maintenant, notre seul objectif est de vous permettre d'acheter <strong>des piles auditives</strong>, <strong>des produits d'entretien</strong> et des <strong>accessoires</strong> pour votre bien-ĂȘtre auditif le plus simplement possible, au meilleur prix.</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:16px;line-height:24px;text-align:left;color:#0A0A0F;">Et surtout, <a href="">avec un vrai service client !</a></div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:16px;line-height:24px;text-align:left;color:#0A0A0F;">Nous sommes une petite équipe à votre disposition pour répondre à toutes vos interrogations. Que ce soit au sujet de la compatibilité des piles, du remboursement de la sécurité sociale ou des détails de livraison, nous nous efforçons de vous répondre dans les meilleurs délais via notre formulaire de contact.</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 0 0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:16px;line-height:24px;text-align:left;color:#0A0A0F;">Bien cordialement,<br> LâĂ©quipe {shop_name}</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- SHOP NAME BEGINING -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:604px;" width="604" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:604px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div style="height:50px;line-height:50px;"> </div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="padding-mobile-outlook" role="presentation" style="width:604px;" width="604" bgcolor="#22253B" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="padding-mobile" style="background:#22253B;background-color:#22253B;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22253B;background-color:#22253B;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:40px 40px 0 40px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:middle;width:340.6px;" ><![endif]-->
<div class="mj-column-per-65 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:middle;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:150px;">
<a href="{shop_url}" target="_blank">
<img alt="" src="{{ mailThemesUrl }}/auditionet_2024/assets/logo-blanc.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="150" height="auto" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:middle;width:183.4px;" ><![endif]-->
<div class="mj-column-per-35 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:middle;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="right" style="font-size:0px;padding:0;word-break:break-word;">
<!--[if mso | IE]><table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:4px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:rgba(255, 255, 255, 0.1);border-radius:3px;width:30px;">
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://www.facebook.com/Auditionet.fr/?locale=fr_FR" target="_blank">
<img alt="" height="30" src="{{ mailThemesUrl }}/auditionet_2024/assets/facebook.png" style="border-radius:3px;display:block;" width="30" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:4px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:rgba(255, 255, 255, 0.1);border-radius:3px;width:30px;">
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://twitter.com/auditionet_fr" target="_blank">
<img alt="" height="30" src="{{ mailThemesUrl }}/auditionet_2024/assets/twitter.png" style="border-radius:3px;display:block;" width="30" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="padding-mobile-outlook" role="presentation" style="width:604px;" width="604" bgcolor="#22253B" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="padding-mobile" style="background:#22253B;background-color:#22253B;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22253B;background-color:#22253B;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 40px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:524px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:20px 0;word-break:break-word;">
<p style="border-top:solid 1px rgba(224,224,234,0.1);font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px rgba(224,224,234,0.1);font-size:1px;margin:0px auto;width:524px;" role="presentation" width="524px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="padding-mobile-outlook" role="presentation" style="width:604px;" width="604" bgcolor="#22253B" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="padding-mobile" style="background:#22253B;background-color:#22253B;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22253B;background-color:#22253B;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 40px 40px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:524px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:14px;font-weight:400;line-height:20px;text-align:left;color:rgba(198, 198, 210, 1);">
<p style="margin-bottom: 0;">Besoin d'aide ?</p>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Hanken Grotesk, Arial;font-size:14px;font-weight:400;line-height:20px;text-align:left;color:#ffffff;">
<p style="margin:0;">Consultez les <a style="color:#fff;text-decoration:underline;" href="{shop_url}/faqs">questions fréquentes</a> <br> ou contactez nous via le <a style="color:#fff;text-decoration:underline;" href="{shop_url}/contactez-nous">formulaire en ligne</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="padding-mobile-outlook" role="presentation" style="width:604px;" width="604" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="padding-mobile" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 40px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" class="" style="" ><![endif]-->
<div style="font-family:Hanken Grotesk, Arial;font-size:12px;line-height:24px;text-align:left;color:#2F2F34;"><strong>© Auditionet SAS</strong> - depuis 2014</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- SHOP NAME ENDING -->
</div>
</body>
</html>
from mjml.
eichenlauba
commented on September 26, 2024
i think i found the problem..
in some td i've code like this :
<td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; @media(max-width: 768px); direction: ltr; font-size: 0px; padding: 48px 40px 40px 40px; text-align: center;" align="center">
i think the prestashop email generator, generate this code @media(max-width: 768px) I don't know why for now but it seem that without this code it fixes my bug.
from mjml.
iRyusa
commented on September 26, 2024
I'm closing then as it doesn't seem to come from us đ
from mjml.
Related Issues (20)
- Example of how to add color variables HOT 1
- MJML Table Data not rendered in newer Outlook versions using WebView2 (Desktop and Android) HOT 14
- how to add a helper container for an image so it can be centered between elements. HOT 1
- Custom mj-head component causes TypeError: this.context.processing is not a function HOT 8
- Outlook 2404 build 17531.20119 not rendering MJML template HOT 10
- MJML Templates not rendering as expected in New Outlook on Windows HOT 4
- Wrong vertical-align in mj-column HOT 1
- Outlook web client doesn't render columns HOT 5
- mjml column is not working in hotmail
- Invalide Certificate HOT 8
- Try it live does not allow pasting HOT 3
- HTML Comments rendered with additional white space HOT 3
- Replace old not maintained Laravel / PHP package HOT 3
- Button rendered without href url on Outlook email HOT 5
- Splitting mjml2html to allow for better use of custom components and templating HOT 1
- installation causing vulnerabilities HOT 1
- Inline external fonts HOT 1
- Handlebars being thrown out in the compiled html in a overridden mjml-column component HOT 2
- Mj-column borders w/ border-radius are not rendering correctly HOT 1
- Possibility to add default <mj-section> background-color HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. đđđ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â€ïž Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mjml.