1

I have an email template. It looks perfect in Gmail (all browsers) and in Web Outlook (all browsers).

But in Outlook 2019 extra white space is added from the left and right side. I suppose it is related to the images. When they are locked the blank space does not appear. When I decide to download them the blank space appears. I can't find what code causes this error. In Outlook 2013 this does not happen, respect the maximum width of 600px.

Help me with this problem? I've already tried everything.

Share images and code:

Outlook 2013

Outlook 2013 visualization OK OK

Outlook 2019

Outlook 2019 visualization BAD BAAAD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <title>*|MC:SUBJECT|* </title>
    <!-- utf-8 works for most cases -->
    <meta charset="UTF-8">
    <!--[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">
    <!--[if mso]>

    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>

    <![endif]-->
    <!--[if lte mso 11]>
    <style>
      .mj-outlook-group-fix {
      width:100% !important;
      }
    </style>
    <![endif]-->

    <!--Web Fonts --->
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
    <!--<![endif]-->
    
  <style type="text/css">
    /*Outlook Reset Styles*/
    .ExternalClass p {
    margin: 0px;
    }
    .ReadMsgBody {
    width: 100%
    }   
    .ExternalClass {
    width: 100%;
    }
    .ExternalClass, .ExternalClass * {
    line-height: 100%;
    }
    .yshortcuts a {
    border-bottom: none !important;
    }
    .mobile-link--footer a {
    color: #666666 !important;
    }
    #outlook a{
            padding:0;
        }
    #body_text td {
    padding-left: 10px;
    padding-right: 10px;
    }


    /*Global Styles*/
        body{
            margin:0 auto !important;
            padding:0 !important;
            width:100% !important;
            -webkit-text-size-adjust:100%;
            -ms-text-size-adjust:100%;

            /*Default Font*/
            font-family:'Tahoma', Verdana,sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #202020;
        }
        table,td{
            border-collapse:collapse;
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        table{
            border-spacing:0 !important;
            border-collapse:collapse !important;
            table-layout:fixed !important;
            margin:0 auto !important;
        }
        img{
            border:0;
            height:auto;
            line-height:100%;
            outline:none;
            text-decoration:none;
            display: block;
            -ms-interpolation-mode:bicubic;
        }
        p{
            display:block;
            margin:2px 0;
        }
        a{
            text-decoration:none;
        }
        .yshortcuts a{
            border-bottom:none !important;
        }
        a[x-apple-data-detectors]{
            color:inherit !important;
        }
        .mcnPreviewText{
            display:none !important;
        }


    /*Buttons & other sections*/
    .button{
        display:inline-block;
      letter-spacing:2px;
      padding: 10px 10px;
      text-decoration:none;
      background: #6b6b6b; 
      background-color: #6b6b6b; 
      border-radius: 5px; 
        }
    .bullet{
        background: #6b6b6b; 
        background-color: #6b6b6b; 
        border-radius: 5px;
        text-align: center;
        padding: 3px 0px 3px 0px;
        margin: 0 auto !important;
        display: block;
        width: 100%;
        }

        
    /*obile Responsives Styles*/
    @media only screen and (max-width:480px){
    .mj-full-width-mobile{
            width:100% !important;
        }

    .centermobile{
      margin: 0 auto !important;
    }

        .blockwrap { 
            display: block !important;
        }

        .hide{
            display: none !important;
        }

        .textcenter{
            text-align: center !important;
        }

        .textleft{
            text-align: left !important;
        }

        .textright{
            text-align: right !important;
        }

        .paddingtotal{
            padding: 0px 0px 0px 0px !important;
        }

        .paddingsi{
            padding: 20px 0px 20px 0px !important;
        }

        .paddingid{
            padding: 0px 20px 0px 20px !important;
        }

        .textminium{
            font-size: 14px !important;
        }

        .headerminium{
            font-size: 20px !important;
        }


}   

/*Right & Left Column Responsives Styles*/
  @media screen and (max-width: 600px){
    .stack-column,.stack-column-center{
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      direction:ltr !important;
    }

} @media screen and (max-width: 600px){
    .stack-column-center{
      text-align:center !important;
    }

}

@media screen and (max-width: 600px){
        .fluid,.fluid-centered{
            max-width:100% !important;
            height:auto !important;
            margin-left:auto !important;
            margin-right:auto !important;
        }
}


/*Container Styles*/        
    .wrapper{
    max-width:600px;
    margin: 0 auto !important;
}
    .clear{
    width:inherit;
    clear:both;
}
</style>
</head>


<!--Start body of the email -->
<body style="background-color:#E0E0E0;background: #E0E0E0;margin: 0;" width="100%" bgcolor="#E0E0E0" >




    <!--Start wrapper -->
    <!--[if mso | IE]>
    <table border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px !important;" width="600">
        <tr>
          <td style="mso-line-height-rule:exactly;max-width:600px !important;" class="wrapper" align="center" width="600">
            <![endif]-->
        <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="background:#FFFFFF;background-color:#FFFFFF;max-width: 600px !important ;" bgcolor="#FFFFFF" width="600">
          <tbody>
            <tr>
             <td id="content" class="wrapper" align="center" width="600" style="direction:ltr;padding:0;max-width: 600px !important;border-collapse:collapse"><!-- Start Main Colum -->





                <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color:#c2c2c2; background:#c2c2c2;" width="100%" bgcolor="#c2c2c2">
                  <tr>
                    <td width="100%" style="mso-line-height-rule:exactly;mso-padding-alt: 0px 0px;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" width="100%" class="mj-full-width-mobile mj-outlook-group-fix wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2; max-width: 600px;">
                       <tbody>
                        <tr>
                           <td  align="center"  class="wrapper" width="100%" bgcolor="#c2c2c2" style="vertical-align:top;margin: 0 auto;padding: 5px 0px;background-color: #c2c2c2; background: #c2c2c2;max-width: 600px;" mc:edit="header_logo">

                                <table cellspacing="0" cellpadding="0" border="0" class="" bgcolor="#c2c2c2" width="100%" style="max-width: 600px;;background-color:#c2c2c2; background:#c2c2c2;">
                                <tr> <td align="center" width="100%" bgcolor="#c2c2c2" style="max-width: 600px;background-color: #c2c2c2; background: #c2c2c2; ">
                                <center>
                                 <img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/22c4d06c-6363-4d2c-808c-6682d6866711.jpg" alt="" style="max-width: 150px;" />
                               </center>
                                </td> </tr>
                                </table>
                            </td>

                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->






                <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
                  <tr>
                    <td width="600" align="center">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
                       <tbody>
                        <tr>
                           <td style="vertical-align:top;"  mc:edit="header_title_text" class="stack-column-center">
                             
                                  <h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-Tittle</h1>

                            </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->





                 <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
                  <tr>
                    <td width="600" align="center">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text_extended" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
                       <tbody>
                        <tr>
                           <td style="vertical-align:top;"  mc:edit="header_title_text_extended" class="stack-column-center">
                             
                                  <h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-SubTittle</h1>

                                   <p class="textcenter" style="text-align: center;padding: 5px 35px 10px 35px;    line-height: 150%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>  



                            </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->








                <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
                  <tr>
                    <td width="600" align="center">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#FFFFFF" mc:repeatable="content_block" mc:variant="hero_image"  style="direction:ltr;display:inline-block;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF; margin: 10px 0px 10px 0px  !important; ">
                       <tbody>
                        <tr>
                           <td style="vertical-align:top;" mc:edit="hero_image">
                            <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="padding: 0px 10px 0px 10px;">
                                <tr>
                                  <td>
                               <center>
                                  <img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;">
                                  <br />
                               </center>
                             </td>
                           </tr>
                         </table>
                            </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->












                 <!--[if mso | IE]>
                <table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" width="100%" bgcolor="#c2c2c2">
                  <tr>
                    <td width="100%" style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
                      <![endif]-->
                    <table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#c2c2c2" id="footer" class="mj-full-width-mobile mj-outlook-group-fix wrapper stack-column-center" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2;font-size: 10px !important;" >
                       <tbody>
                        <tr>
                            <td align="center" class="wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;max-width:600px; background-color: #c2c2c2; background: #c2c2c2;"  width="100%">


                                <table cellspacing="0" cellpadding="0" border="0" class="" width="100%" style="max-width: 600px;">
                                <tr> 


                             <td id="businessinfo" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top; text-align: left;padding: 20px 20px 20px 20px;margin: 0 auto !important;" mc:edit="footer_section">
                                  <span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
                                  <br />
                            </td>


                           <td id="legal" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top;text-align: right;padding: 20px 20px 20px 20px;margin: 0 auto !important;">
                                  <a href="#" target="Blank" style="font-weight: 400;">Unsuscribe</a>
                                  <br />
                                  <a href="#" target="Blank" style="font-weight: 400;">Update Profile</a>
                                  <br />
                            </td>

                                </tr>
                                </table>

                           </td>
                        </tr>
                       </tbody>
                    </table>
                <!--[if mso | IE]>
                </td>
                </tr>
                </table>
                <![endif]-->






                

                </td><!-- Final Main Colum - End wrapper -->
            </tr>
           </tbody>
        </table>
            <!--[if mso | IE]>
    </td>
    </tr>
    </table>
    <![endif]-->



</body><!--Final cuerpo del email - End body of the email -->
</html>
Syfer
  • 4,262
  • 3
  • 20
  • 37

2 Answers2

0

welcome to the wounderfull world of Email coding ;)

I ran some tests on your template, and found out its the big image in the middel that mess things up.

  1. Outlook dosnt always work with just style="max-width:600px;", you need the width on the <img> tag it self.
  2. Your template is 600px, your image is set to 600px, but theres also 20px margin on each side extra.

This should solve your issue

 <center>
   <img width="560" src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 560px;">
 </center>

Before:

enter image description here

After:

enter image description here

Bidstrup
  • 1,597
  • 2
  • 16
  • 32
0

This is most likely happening due to your hero image.

If you do not set the width attribute in <img> tags, outlook desktop apps tend to show the image at its original width. Setting max-width only is not enough.

The Header has extra space on left and right because the Hero image is taking extra space. It is showing up in 650 pixels width even though max-width is set to 600 pixels. Simply add width attribute to the <img> tag (preferably at the end) and it should fix the issue. So, your <img> tag for the hero image should look like this,

<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;" width="600" />

notice the width attribute I added at the end.

This may create some responsiveness issue. To solve the responsiveness add this to the head style tag (if not already there).

@media screen and (max-width: 600px) {
    img {width: 100% !important;}
}

All your images have max-width set inline, so making width 100% won't make them blow up in mobile screens.

Hope this helps.

MD Tarik Hasan Khan
  • 71
  • 1
  • 6