Hello!
I am trying to fix this issue that is showing only on Outlook desktop versions, but I ran out of ideas.
Trying to achieve rounded shapes with a mix of code+image, so it would render on outlook too. But one of the shapes is showing a small line on the side which I'm not understanding where it comes from - does anyone have an idea on why is showing up there?
I've used MJML to design that
<mjml>
<!-- Head -->
<mj-head>
<mj-attributes>
<mj-text padding="0px" />
<mj-section padding="0px" />
<mj-image padding="0px" />
<mj-all font-family="Arial" font-size="12px" />
</mj-attributes>
</mj-head>
<!--
COLOR PALLETTE
CORE COLORS
INK BLUE: #1a2746
MID GREY: #a9adb1
RED: #e0121d
LIGHT GREY: #d2d4da
PILLARS
LABS GREEN: #aabe3b
KNOWLEDGE: #b71A5D
CODE+FRAMEWORKS: #dc6526
TRAINING+ACCREDITATION: #662482
-->
<mj-body background-color="#EAEAEA">
<!-- SECTION START - HEADER - WHAT'S COMING UP -->
<!-- SECTION START - HEADER - WHAT'S COMING UP -->
<mj-section background-color="#ffffff">
<mj-group width="30%" background-color="#1a2746">
<mj-column vertical-align="bottom" width="15%" padding="100px 0px 0px 0px">
<mj-image align="left" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_bottom-left_300px.png" width="120px">
</mj-image>
</mj-column>
<mj-column width="70%">
<mj-text padding="30px 10px 30px 10px" align="left" font-size="18px" font-weight="600" color="#ffffff" line-height="20px">
How do you identify the skills most necessary for AI to be successful? </mj-text>
</mj-column>
<mj-column vertical-align="top" width="15%" padding="0px 0px 0px 0px" background-color="#1a2746">
<mj-image align="right" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_top-right_300px.png" width="150px">
</mj-image>
</mj-column>
<mj-column background-color="#1a2746" vertical-align="bottom" width="15%" padding="0px 0px 0px 0px">
</mj-column>
</mj-group>
<mj-group width="70%" background-color="#35aade">
<mj-column background-color="#35aade" vertical-align="bottom" width="100%" padding="0px 0px 0px 0px">
<mj-image align="left" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_top-left_300px.png" width="60px">
</mj-image>
<mj-text padding="0px 40px 0px 40px" align="left" font-size="28px" font-weight="600" color="#ffffff" line-height="30px">
Aiming high with AI
</mj-text>
<mj-text padding="20px 40px 0px 40px" align="left" font-size="14px" font-weight="500" color="#ffffff" line-height="18px">
Artificial intelligence (AI) is often touted as the ‘secret sauce’ for almost every issue but is that realistic? Are you grappling with how AI, advanced analytics and machine learning can be applied to your organization? How do you identify the skills most necessary for AI to be successful? How can you achieve AI at scale to unlock its full business value? Is there anything really artificial about AI?
</mj-text>
<mj-image align="right" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_bottom-right_300px.png" width="60px">
</mj-image>
</mj-column>
</mj-group>
</mj-section>
<!-- SECTION END - TEXT BLOCK - -->
</mj-body>
</mjml>
Else this is the HTML code:
<div style="background-color:#EAEAEA;"> <!-- SECTION START - HEADER - WHAT'S COMING UP --> <!-- SECTION START - HEADER - WHAT'S COMING UP --> <!--[if mso | IE]> <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" 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:600px;"> <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:0px;text-align:center;"> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="" style="width:180px;" > <![endif]--> <div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;background-color:#1a2746;"> <!--[if mso | IE]> <table bgcolor="#1a2746" border="0" cellpadding="0" cellspacing="0" role="presentation" > <tr> <td style="vertical-align:bottom;width:27px;" > <![endif]--> <div class="mj-column-per-15 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:bottom;width:15%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td style="vertical-align:bottom;padding:100px 0px 0px 0px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="left" style="font-size:0px;padding:0px;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:27px;"> <img height="auto" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_bottom-left_300px.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;" width="27" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> <td style="vertical-align:top;width:126px;" > <![endif]--> <div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:70%;"> <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:30px 10px 20px 5px;word-break:break-word;"> <div style="font-family:Arial;font-size:18px;font-weight:600;line-height:20px;text-align:left;color:#ffffff;">How do you identify the skills most necessary for AI to be successful?</div> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> <td style="vertical-align:top;width:27px;" > <![endif]--> <div class="mj-column-per-15 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:15%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td style="background-color:#1a2746;vertical-align:top;padding:0px 0px 0px 0px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="right" style="font-size:0px;padding:0px;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:27px;"> <img height="auto" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_top-right_300px.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;" width="27" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> <td style="vertical-align:bottom;width:1px;" > <![endif]--> <div class="mj-column-per-1 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:bottom;width:1%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td style="background-color:#1a2746;vertical-align:bottom;padding:0px 0px 0px 0px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> </div> <!--[if mso | IE]> </td> <td class="" style="width:420px;" > <![endif]--> <div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;background-color:#35aade;"> <!--[if mso | IE]> <table bgcolor="#35aade" border="0" cellpadding="0" cellspacing="0" role="presentation" > <tr> <td style="vertical-align:bottom;width:420px;" > <![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:bottom;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td style="background-color:#35aade;vertical-align:bottom;padding:0px 0px 0px 0px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="left" style="font-size:0px;padding:0px;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:60px;"> <img height="auto" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_top-left_300px.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;" width="60" /> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left" style="font-size:0px;padding:0px 40px 0px 40px;word-break:break-word;"> <div style="font-family:Arial;font-size:28px;font-weight:600;line-height:30px;text-align:left;color:#ffffff;">Aiming high with AI</div> </td> </tr> <tr> <td align="left" style="font-size:0px;padding:20px 40px 0px 40px;word-break:break-word;"> <div style="font-family:Arial;font-size:14px;font-weight:500;line-height:18px;text-align:left;color:#ffffff;">Artificial intelligence (AI) is often touted as the ‘secret sauce’ for almost every issue but is that realistic? Are you grappling with how AI, advanced analytics and machine learning can be applied to your organization? How do you identify the skills most necessary for AI to be successful? How can you achieve AI at scale to unlock its full business value? Is there anything really artificial about AI?</div> </td> </tr> <tr> <td align="right" style="font-size:0px;padding:0px;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:60px;"> <img height="auto" src="https://info.tmforum.org/rs/021-WLD-815/images/DTWS-2021-circle_bottom-right_300px.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;" width="60" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> </div> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> <!-- SECTION END - TEXT BLOCK - --> </div>
Any input is much appreciated!
Livia
.png)