I use a Section and Column and it works fine in gmail bus It has a problem with Outlook Web App. It seems like the section and the column takes a full width. Is there a way to fix this.
Problem with Outlook Web App:
https://www.aguiabranca.com.br/Files/SiteImages/653-screencapture-webmail-aguiabranca-br-owa-2018-08-30-09_12_09.png
Working fine on Gmail:
https://www.aguiabranca.com.br/Files/SiteImages/919-screencapture-outlook-live-mail-inbox-id-AQQkADAwATNiZmYAZC0xNjEyLTdjOWEtMDACLTAwCgAQAIzNRbzn-B1OkmaLRAWp1c4-2018-08-30-09_30_04.png
Code:
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></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; }
.ReadMsgBody { width:100%; }
.ExternalClass { width:100%; }
.ExternalClass * { line-height:100%; }
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]><!--><style type="text/css">@media only screen and (max-width:480px) {
@-ms-viewport { width:320px; }
@viewport { width:320px; }
}</style><!--<![endif]--><!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--><!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; }
.mj-column-per-50 { width:50% !important; }
.mj-column-per-25 { width:25% !important; }
}</style><style type="text/css">[owa] .mj-column-per-100 { width:100% !important; }
[owa] .mj-column-per-50 { width:50% !important; }
[owa] .mj-column-per-25 { width:25% !important; }</style><style type="text/css"></style></head><body style="background-color:#FFF;"><div style="background-color:#FFF;"><!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="left" style="font-size:0px;padding:0px;word-break:break-word;"><table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;"><tr><td align="left" style="padding:10px 0px 10px 5px;"><font style="text-decoration:none;color: #7D7D7D;font-size: 10px;line-height:10px;font-family:Mada, Arial, Helvetica, sans-serif; font-size: 11px;">Arruma a mala ai!</font></td><td align="right" style="padding:10px 5px 10px 0px;"><font style="text-decoration:none;color:#7D7D7D;font-size: 9px;font-family:Mada, Arial, Helvetica, sans-serif; font-size: 9px;line-height:12px;"><a href="" class="link-nostyle" style="text-decoration: none; padding: 0px 5px 5px 0px; text-decoration: underline; color: #7D7D7D;" target="_blank">Ver Online</a>| <a href="" class="link-nostyle" style="text-decoration: none; padding: 0px 0px 0px 5px; text-decoration: underline; color: #7D7D7D;" target="_blank">Descadastrar</a></font></td></tr></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:600px;"><img height="auto" src="https://www.aguiabranca.com.br/Files/SiteImages/647-logo_04.jpg" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="600"></td></tr></tbody></table></td></tr></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" style="width:600px;" width="600"
>
<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;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]--><div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;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:0px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tr><td align="left" style="font-size:0px;padding:0px;word-break:break-word;"><table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0px;color:#1D1756;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;"><tr align="center" padding="0px"><td style="background-color:#FFFFFF;border-left:1px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="45%" padding="0px"><a href="https://goo.gl/a1ATcU" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">COMPRE SUA PASSAGEM</a></td><td style="background-color:#FFFFFF;border-left:2px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0; font-family:Arial, Helvetica, sans-serif;" width="30%"><a href="https://goo.gl/Sf1M8W" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">PROMOÇÕES</a></td><td style="background-color:#FFFFFF;border-left:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;border-right:2px solid #F0F0F0;" width="25%"><a href="https://goo.gl/7TsZLF" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">TURISMO</a></td></tr></table></td></tr></table></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]--><div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;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:0px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tr><td align="left" style="font-size:0px;padding:0px;word-break:break-word;"><table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0px;color:#1D1756;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;"><tr align="center" padding="0px"><td style="background-color:#FFFFFF;border-left:1px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="45%" padding="0px"><a href="https://goo.gl/MHHx4Z" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">ACOMPANHE A VIAGEM</a></td><td style="background-color:#FFFFFF;border-left:2px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="30%" padding="0px"><a href="https://goo.gl/9XGDTW" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">ENCOMENDAS</a></td><td style="background-color:#FFFFFF;border-right:1px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="25%"><a href="https://goo.gl/Hgrviy" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">LOGIN</a></td></tr></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:600px;"><a href="https://goo.gl/GEgsdA" target="_blank"><img alt="A previsão para esse final de semana é de ARRUMAR AS MALAS!" height="auto" src="https://goo.gl/iaxmzE" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="600"></a></td></tr></tbody></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:600px;"><img height="auto" src="https://goo.gl/6iBmpE" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="600"></td></tr></tbody></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]--><div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;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="border:solid 5px #F59E32;;vertical-align:top;padding:0px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:300px;"><a href="https://goo.gl/HzUxM2" target="_blank"><img height="auto" src="https://goo.gl/5ZBBfw" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="300"></a></td></tr></tbody></table></td></tr></table></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]--><div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;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="border:solid 5px #F59E32;;vertical-align:top;padding:0px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:300px;"><a href="https://goo.gl/yTNXZ1" target="_blank"><img height="auto" src="https://goo.gl/EHMeVB" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="300"></a></td></tr></tbody></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]--><div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;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="border:solid 5px #F59E32;;vertical-align:top;padding:0px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:300px;"><a href="https://goo.gl/cKQNiU" target="_blank"><img height="auto" src="https://goo.gl/owz8Fs" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="300"></a></td></tr></tbody></table></td></tr></table></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]--><div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;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="border:solid 5px #F59E32;;vertical-align:top;padding:0px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:300px;"><a href="https://goo.gl/oPPmY9" target="_blank"><img height="auto" src="https://goo.gl/4tzXDf" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="300"></a></td></tr></tbody></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:600px;"><a href="https://goo.gl/YxEty3" target="_blank"><img height="auto" src="https://goo.gl/sgTt2p" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="600"></a></td></tr></tbody></table></td></tr><tr><td align="center" style="font-size:0px;padding:0px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:600px;"><a href="https://goo.gl/YxEty3" target="_blank"><img height="auto" src="https://goo.gl/nH4PMh" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="600"></a></td></tr></tbody></table></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:10px 0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
>
<tr>
<td>
<![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tr><td style="padding:4px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#1D1756;border-radius:99px;width:30px;"><tr><td style="font-size:0;height:30px;vertical-align:middle;width:30px;"><a href="https://goo.gl/tvs3DD" target="_blank"><img height="30" src="https://goo.gl/TvD7Qm" style="border-radius:99px;" width="30"></a></td></tr></table></td></tr></table><!--[if mso | IE]>
</td>
<td>
<![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tr><td style="padding:4px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#1D1756;border-radius:99px;width:30px;"><tr><td style="font-size:0;height:30px;vertical-align:middle;width:30px;"><a href="https://goo.gl/EG1RcV" target="_blank"><img height="30" src="https://goo.gl/rLBT3P" style="border-radius:99px;" width="30"></a></td></tr></table></td></tr></table><!--[if mso | IE]>
</td>
<td>
<![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tr><td style="padding:4px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#1D1756;border-radius:99px;width:30px;"><tr><td style="font-size:0;height:30px;vertical-align:middle;width:30px;"><a href="https://goo.gl/GZf8aL" target="_blank"><img height="30" src="https://goo.gl/PcLVoG" style="border-radius:99px;" width="30"></a></td></tr></table></td></tr></table><!--[if mso | IE]>
</td>
<td>
<![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tr><td style="padding:4px;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#1D1756;border-radius:99px;width:30px;"><tr><td style="font-size:0;height:30px;vertical-align:middle;width:30px;"><a href="url" target="_blank"><img height="30" src="https://goo.gl/DYiRhf" style="border-radius:99px;" width="30"></a></td></tr></table></td></tr></table><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></td></tr></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--><p style="border-top:solid 1px lightgrey;font-size:1;margin:0px auto;width:70%;"></p><!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px lightgrey;font-size:1;margin:0px auto;width:420px;" role="presentation" width="420px"
>
<tr>
<td style="height:0;line-height:0;">
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px 0px 0px 0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:10px 25px;padding-top:20px;word-break:break-word;"><div style="font-family:Mada;font-size:14px;line-height:20px;text-align:center;color:#1D1756;">Baixe e Compre sua passagem pelo nosso APP :</div></td></tr></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td><!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px 0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:150px;"
>
<![endif]--><div class="mj-column-per-25 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:86px;"><a href="https://goo.gl/rYyTR4" target="_blank"><img height="27px" src="https://goo.gl/2W4buz" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="86"></a></td></tr></tbody></table></td></tr></table></div><!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:150px;"
>
<![endif]--><div class="mj-column-per-25 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:86px;"><a href="https://goo.gl/wd9syP" target="_blank"><img height="27px" src="https://goo.gl/paGBZZ" style="border:0;display:block;outline:none;text-decoration:none;width:100%;" width="86"></a></td></tr></tbody></table></td></tr></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></td></tr></tbody></table><!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px 0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;word-break:break-word;"><div style="font-family:Mada;font-size:14px;line-height:20px;text-align:center;color:#1D1756;">Ou Compre pelo nosso Site:<br><a href="http://www.aguiabranca.com.br" class="link-nostyle" style="text-decoration: none; text-decoration: underline; color: #1D1756;"><b>www.aguiabranca.com.br</b></a><br><br>Fale Conosco:<br><b>0800 725 1211</b></div></td></tr></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" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]--><div style="Margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:0px 0px 0px 0px;text-align:center;vertical-align:top;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:600px;"
>
<![endif]--><div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%"><tr><td style="font-size:0px;padding:10px 0px;word-break:break-word;"><p style="border-top:solid 1px lightgrey;font-size:1;margin:0px auto;width:70%;"></p><!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px lightgrey;font-size:1;margin:0px auto;width:420px;" role="presentation" width="420px"
>
<tr>
<td style="height:0;line-height:0;">
</td>
</tr>
</table>
<![endif]--></td></tr><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Mada;font-size:14px;line-height:20px;text-align:center;color:#1D1756;">Informações Úteis:<br>*Confira regulamento da promoção, horário disponível, serviço e trecho vigente. Valor referente para uma compra por CPF. Oferta não cumulativa com as demias promoções. Imagens meramente ilustrativas. A Águia Branca se reserva ao direito de corrigir eventuais informações incorretas.</div></td></tr></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--></div></body></html>
I don't think we can test this version of outlook in litmus/eoa. I found a non valid href inside your html, can you provide the MJML so it will be easier for us to check if everything is fine. We need more information about how you're sending the email, the version of mjml you use too.
Seen that you're using putsmail to send it 👍
I am sending with putsmail.com . I am using the MJML App V2.90.
MJML APP: https://www.aguiabranca.com.br/Files/SiteImages/547-mjml_app.jpg
<mjml></mjml>
<mjml owa="desktop">
<mj-head>
<mj-attributes>
<mj-text align="center" color="#555" />
<mj-class name="zeropad" padding="0px"/>
<mj-class name="big" font-size="20px" />
<mj-all/>
<mj-font name="Mada" href="https://fonts.googleapis.com/css?family=Mada"/>
</mj-attributes>
<mj-style inline="inline">
.link-nostyle {
color: inherit;
text-decoration: none;
}
.contact a {
color:#000000!important;
text-decoration:underline!important;
}
</mj-style>
</mj-head>
<mj-body background-color="#FFF">
<!-- Header -->
<mj-section padding="0px">
<mj-column>
<mj-table padding="0px">
<tr>
<td align="left" style="padding:10px 0px 10px 5px;"> <font style="text-decoration:none;color: #7D7D7D;font-size: 10px;line-height:10px;font-family:Mada, Arial, Helvetica, sans-serif; font-size: 11px;">Arruma a mala ai!</font>
</td>
<td align="right" style="padding:10px 5px 10px 0px;">
<font style="text-decoration:none;color:#7D7D7D;font-size: 9px;font-family:Mada, Arial, Helvetica, sans-serif; font-size: 9px;line-height:12px;">
<a href="" class="link-nostyle" style="text-decoration:none; padding:0px 5px 5px 0px;text-decoration: underline;color: #7D7D7D;" target="_blank">
Ver Online</a>|
<a href="" class="link-nostyle" style="text-decoration:none; padding:0px 0px 0px 5px;text-decoration: underline;color: #7D7D7D;" target="_blank">
Descadastrar
</a>
</font>
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
<mj-section padding="0px">
<mj-column>
<mj-image src="https://www.aguiabranca.com.br/Files/SiteImages/647-logo_04.jpg" padding="0px" width="600px"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#FFFFFF" padding="0px">
<mj-column padding="0px">
<mj-table width="100%" cellpadding="0px" cellspacing="0px" padding="0px" color="#1D1756">
<tr align="center" padding="0px">
<td style="background-color:#FFFFFF;border-left:1px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="45%" padding="0px">
<a href="https://goo.gl/a1ATcU" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">COMPRE SUA PASSAGEM</a>
</td>
<td style="background-color:#FFFFFF;border-left:2px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0; font-family:Arial, Helvetica, sans-serif;" width="30%">
<a href="https://goo.gl/Sf1M8W" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">PROMOÇÕES</a>
</td>
<td style="background-color:#FFFFFF;border-left:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;border-right:2px solid #F0F0F0;" width="25%">
<a href="https://goo.gl/7TsZLF" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">TURISMO</a>
</td>
</tr>
</mj-table>
</mj-column>
<mj-column padding="0px">
<mj-table width="100%" cellpadding="0px" cellspacing="0px" padding="0px" color="#1D1756">
<tr align="center" padding="0px">
<td style="background-color:#FFFFFF;border-left:1px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="45%" padding="0px">
<a href="https://goo.gl/MHHx4Z" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">ACOMPANHE A VIAGEM</a>
</td>
<td style="background-color:#FFFFFF;border-left:2px solid #F0F0F0;border-right:2px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="30%" padding="0px">
<a href="https://goo.gl/9XGDTW" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">ENCOMENDAS</a>
</td>
<td style="background-color:#FFFFFF;border-right:1px solid #F0F0F0;border-bottom:2px solid #F0F0F0;" width="25%">
<a href="https://goo.gl/Hgrviy" style="text-decoration: none;font-weight: 400;font-size: 10px;color: #1D1756; font-family:Mada, Arial, Helvetica, sans-serif;" target="_blank">LOGIN</a>
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-column>
</mj-section>
<!-- Body -->
<mj-section padding="0px">
<mj-column>
<mj-image src="https://goo.gl/iaxmzE" padding="0px" href="https://goo.gl/GEgsdA" alt="A previsão para esse final de semana é de ARRUMAR AS MALAS!"></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0px">
<mj-column>
<mj-image src="https://goo.gl/6iBmpE" padding="0px"></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0px">
<mj-column padding="0px" border="solid 5px #F59E32;">
<mj-image src="https://goo.gl/5ZBBfw" href="https://goo.gl/HzUxM2" padding="0px"></mj-image>
</mj-column>
<mj-column padding="0px" border="solid 5px #F59E32;">
<mj-image src="https://goo.gl/EHMeVB" href="https://goo.gl/yTNXZ1" padding="0px"></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0px">
<mj-column padding="0px" border="solid 5px #F59E32;">
<mj-image src="https://goo.gl/owz8Fs" padding="0px" href="https://goo.gl/cKQNiU"></mj-image>
</mj-column>
<mj-column padding="0px" border="solid 5px #F59E32;">
<mj-image src="https://goo.gl/4tzXDf" padding="0px" href="https://goo.gl/oPPmY9"></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0px">
<mj-column>
<mj-image src="https://goo.gl/sgTt2p" padding="0px" href="https://goo.gl/YxEty3"></mj-image>
<mj-image src="https://goo.gl/nH4PMh" padding="0px" href="https://goo.gl/YxEty3"></mj-image>
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section padding="10px 0px">
<mj-column>
<mj-social font-size="15px" icon-size="30px" mode="horizontal" border-radius="99px">
<mj-social-element href="https://goo.gl/tvs3DD" background-color="#1D1756" src="https://goo.gl/TvD7Qm">
</mj-social-element>
<mj-social-element href="https://goo.gl/EG1RcV" background-color="#1D1756" src="https://goo.gl/rLBT3P">
</mj-social-element>
<mj-social-element href="https://goo.gl/GZf8aL" background-color="#1D1756" src="https://goo.gl/PcLVoG">
</mj-social-element>
<mj-social-element href="url" background-color="#1D1756" src="https://goo.gl/DYiRhf"></mj-social-element>´
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
<mj-divider border-width="1px" border-style="solid" border-color="lightgrey" padding="10px 0px" width="70%"/>
<mj-section padding="0px 0px 0px 0px">
<mj-column>
<mj-text
font-family="Mada"
font-size="14px"
line-height="20px"
color="#1D1756"
align="center"
padding-top="20px">
Baixe e Compre sua passagem pelo nosso APP :
</mj-text>
</mj-column>
</mj-section>
<mj-section padding="0px 0px" full-width="full-width">
<mj-column width="25%">
<mj-image src="https://goo.gl/2W4buz" width="86px" height="27px" align="center" href="https://goo.gl/rYyTR4"></mj-image>
</mj-column>
<mj-column width="25%">
<mj-image src="https://goo.gl/paGBZZ" width="86px" height="27px" align="center" href="https://goo.gl/wd9syP"></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0px 0px">
<mj-column>
<mj-text
font-family="Mada"
font-size="14px"
color="#1D1756"
align="center"
padding-top="10px"
line-height="20px">
Ou Compre pelo nosso Site: </br>
<a href="http://www.aguiabranca.com.br" class="link-nostyle" style="text-decoration:none; text-decoration: underline;color: #1D1756;"> <b>www.aguiabranca.com.br</b></a>
</br></br>
Fale Conosco: </br>
<B>0800 725 1211</B></mj-text>
</mj-column>
</mj-section>
<mj-section padding="0px 0px 0px 0px">
<mj-column>
<mj-divider border-width="1px" border-style="solid" border-color="lightgrey" padding="10px 0px" width="70%"/>
<mj-text
font-family="Mada"
font-size="14px"
color="#1D1756"
align="center"
line-height="20px">
Informações Úteis: </br>
*Confira regulamento da promoção, horário disponível, serviço e trecho vigente. Valor referente para uma compra por CPF. Oferta não cumulativa com as demias promoções. Imagens meramente ilustrativas. A Águia Branca se reserva ao direito de corrigir eventuais informações incorretas.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Hi @viniciusvinicius there has been a fix on images recently, could you try if it's fixed with this html ? https://gist.github.com/kmcb777/7c38f287830b8d9f9ec0fc8ae41dc8e6
Hi @iRyusa id there something that I can do to fix this full width problem?
Well it's really hard for us to debug as we don't have any access to this version of outlook, any way to have a free account to this client so we try to check if we can do something.
Edit: Cleaning the issue a bit
+1 on this one, everything works fine except Outlook client..
Hi iRyusa, thanks for your attention! Sorry, I work in a company and I don`t have privilege to provide you an access.
@noudadrichem can you be a bit more specific about your Outlook version ?
This version shown here isn't really widely used for MJML target audience.
We're really up to digg a bit for this client but as we have no any access
to it, it's hard to help you
On Mon, Sep 3, 2018 at 9:12 PM viniciusvinicius notifications@github.com
wrote:
Hi iRyusa, thanks for your attention! Sorry, I work in a company and I
don`t have privilege to provide you an access.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1336#issuecomment-418179479, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzRVafc9k7C_kTruE6s66ytAzt1Kaks5uXX8jgaJpZM4WTY4q
.
--
Cordialement,
Maxime BRAZEILLES
@iRyusa, I will try te get an access for you. Maybe it will take some days. I will reply here,
Thank you for now!
@iRyusa It's Microsoft office 365 pack. So it's the newest Outlook. I think my client said it's 2016 or something, because there is no newer version.
@noudadrichem In Outlook 2016 the mail shoud look fine. On Outlook 365, it will display the mobile version by default, you have to use this attribute to display the desktop version https://medium.com/mjml-making-responsive-email-easy/mjml-turns-2-and-levels-up-with-a-new-version-mjml-v4-d3f59b752ae6#f702 . I think your issue isn't related to this one so feel free to open a new one with your details if this solution doesn't work
Ah oke, i'll make a new issue I think. By adding the owa='desktop' attribute my whole template is broken. haha weird
Have the same issue testing on Litmus on; Comcast, Office360, and Outlook.com.
And owa='desktop' gives me blank page in MJML App.
MJML App v2.8.0
MJML v^4.0.3
Sample code (with removed images due to corp privacy).
<mj-wrapper padding="0 10px">
<mj-section padding="0 0 10px" text-align="center">
<mj-column width="33%">
<mj-image href=""
align="center"
width="140px"
height="44px"
src=""
css-class="badge"
padding="5px 0"/>
</mj-column>
<mj-column width="33%">
<mj-image href=""
align="center"
width="140px"
height="44px"
src=""
css-class="badge"
padding="5px 0"/>
</mj-column>
<mj-column width="33%">
<mj-button href=""
inner-padding="0"
align="center"
padding="5px 0"
background-color="#FFC20E"
color="#434A54"
border-radius="5px"
font-size="14px"
font-weight="bold"
width="140px"
height="45px">
Web (PC/Mac)
</mj-button>
</mj-column>
</mj-section>
</mj-wrapper>
@futhr I have the exact same thing when adding owa
It's a bug within the app, you can add a <mjml></mjml> before the
On Mon, Sep 10, 2018 at 6:27 PM Noud Adrichem notifications@github.com
wrote:
@futhr https://github.com/futhr I have the exact same thing when adding
owa—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1336#issuecomment-419975074, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzYQtiItYQmnwJb7eBsRkf_p2SoVzks5uZpLvgaJpZM4WTY4q
.
--
Cordialement,
Maxime BRAZEILLES
I made it work for Outlook.com and Office 365, but no luck with Comcast.
Comcast doesn't support media queries. So it will display the mobile version as MJML is mobile first.
Well as OWA isn't really a widespread client, we're gonna close this issue for now. If anyone has any clue of what's going on feel free to re-open and we'll try to see if we can fix it.