How to fix html width rendering problem in outlook

645 Views Asked by At

New HTML email template for this client seems to work fine elsewhere but on Outlook it gets displayed too wide or entire screen. I understand that in MSO width rules have to be forced through conditional, but none of my "if mso" would work and it continue to render too wide instead of honouring my 600px request. First time so more in general I'm not too positive that the code I've got down is clean and essential as it should be. Would very much appreciate your expert cross check and if you could point out wherever you see mistakes in it.

    <!DOCTYPE html>
    <html xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
    <title>{email_subject}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="x-apple-disable-message-reformatting">
    <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
    <style type="text/css">
    #outlook a{padding:0;}
    .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

    body { margin: 0; padding: 0; height: 100%!important; width: 100%!important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly;}
    table,td {
        border-collapse: separate !important;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
    }
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%!important; -ms-interpolation-mode: bicubic;}
    img.aligncenter { display: block; margin: 0 auto;}
    @media screen and (max-width: 525px) {
        .pt-1, .padding-top-15 { padding-top: 15px!important; }
        .pb-1, .padding-bottom-15 { padding-bottom: 15px!important; }
        .responsive { width:100%!important; }
        table.responsive { width:100%!important; float: none; display: table; padding-left: 0; padding-right: 0; }
        table[class="responsive"] { width:100%!important; float: none; display: table; padding-left: 0; padding-right: 0; }
        img { max-width: 100%!important }
        img[class="responsive"] { max-width: 100%!important; }
        /* "width: auto" restores the natural dimensions forced with attributes for Outlook */
        .fluid { max-width: 100%!important; width: auto; }
        img[class="fluid"] { max-width: 100%!important; width: auto; }

        .block { display: block; }

        td[class="responsive"]{width:100%!important; max-width: 100%!important; display: block; padding-left: 0 !important; padding-right: 0!important; float: none; }
        td.responsive { width:100%!important; max-width: 100%!important; display: block; padding-left: 0 !important; padding-right: 0!important; float: none; }

        td[class="section-padding-bottom-image"]{
            padding: 50px 15px 0 15px !important;
        }

        .max-width-100 { max-width: 100%!important; }

        /* Obsolete */
        .tnp-grid-column {
            max-width: 100%!important;
        }

    }



    /* Text */


    /* Html */
    .html-td-global p {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
    }


    /* Last posts */
    @media (max-width: 525px) {
        .posts-1-column {
            width: 100%!important;
        }
        .posts-1-image {
            width: 100%!important;
            display: block;
        }
    }



    /* Gallery */
    .gallery-medium {
            box-sizing: border-box;
            width: 280px;
            height: 200px;
            max-width: 100%!important;
            overflow: hidden;
            display: inline-block;
            text-align: center;
            padding: 0;
            margin: 5px;
        }
    @media all and (max-width: 480px) {
        .gallery-thumbnail-img {
            max-width: 45%;
        }
        .gallery-medium {
            max-width: 100%!important;
            height: auto;
            display: block;
            margin-bottom: 10px;
        }
    }


    /* A single full post */

    @media all and (max-width: 480px) {
        .single-post-gallery img {
            max-width: 40%;
        }
        .single-post-1-column {
            width: 100%!important;
        }
        .single-post-1-image {
            width: 100%!important;
            display: block;
        }
    }



    /* List */
    @media all and (max-width: 480px) {
        .list-text .mobile {
            font-size: 20px;
        }
    }



    /* Columns */
    @media only screen and (min-width:480px) {
        .mj-column-per-50 {
            width: 50% !important;
            max-width: 50%;
        }
    }

    @media only screen and (min-width:480px) {
        .mj-column-per-33 {
            width: 33.333333333333336% !important;
            max-width: 33.333333333333336%;
        }
    }

    @media only screen and (min-width:480px) {
        .mj-column-per-25 {
            width: 25% !important;
            max-width: 25%;
        }
    }
    </style>
    </head>
    <body style="margin: 0; padding: 0; line-height: normal; word-spacing: normal;" dir="ltr">

    <table cellpadding='0' cellspacing='0' border='0' width='100%'>
    <tr>
    <td bgcolor='#ffffff' valign='top'><!-- tnp --><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="image">
    <tbody><tr><td align="center" style="padding: 0;" class="edit-block">
    <!--[if mso | IE]><!--[if mso]><table role=3D"presentation" align=3D"center" style=3D"width:600px;"><![endif]-->    <table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MjAsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoyMCwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImh0bWwiOiJcdTAwM0NwIHN0eWxlPVwibWFyZ2luOiAwcHg7dGV4dC1hbGlnbjogcmlnaHRcIlx1MDAzRTI1IG5vdmVtYnJlMjAyMlx1MDAzQ1wvcFx1MDAzRSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoidGV4dCJ9" cellpadding="0" align="center" cellspacing="0" width="100%" style=" border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">

    <tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 15px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%"><tbody><tr><td align="center"><a href="https://www.ilborgodiparma.net?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=logo_link" target="_blank" rel="noopener nofollow"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px"></a></td></tr></tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="text">
    <tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MjAsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoyMCwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImh0bWwiOiJcdTAwM0NwIHN0eWxlPVwibWFyZ2luOiAwcHg7dGV4dC1hbGlnbjogcmlnaHRcIlx1MDAzRTI1IG5vdmVtYnJlMjAyMlx1MDAzQ1wvcFx1MDAzRSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoidGV4dCJ9" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
    <tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 0px; padding-left: 15px; padding-right: 15px; padding-bottom: 10px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%" style="width: 100%!important" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td width="100%" valign="top" align="left" style="font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: normal; color: #313131; line-height: 1.5;">
                <p style="margin: 0px;padding-top:0px;padding-bottom: 10px; text-align: right">16 febbraio 2023</p>        </td>
        </tr>
    </tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="cpt">
    <tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImxhbmd1YWdlIjoiIiwicG9zdF90eXBlIjoicG9zdCIsIm1heCI6IjUiLCJpbWFnZSI6IjEiLCJkYXRlIjoiMSIsImF1dGhvciI6IjEiLCJ0aXRsZV9mb250X2ZhbWlseSI6IiIsInRpdGxlX2ZvbnRfc2l6ZSI6IiIsInRpdGxlX2ZvbnRfY29sb3IiOiIiLCJ0aXRsZV9mb250X3dlaWdodCI6IiIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImZvbnRfd2VpZ2h0IjoiIiwiYnV0dG9uX2xhYmVsIjoiQ09OVElOVUEiLCJidXR0b25fYmFja2dyb3VuZCI6IiIsImJ1dHRvbl9mb250X2NvbG9yIjoiIiwiYnV0dG9uX2ZvbnRfZmFtaWx5IjoiIiwiYnV0dG9uX2ZvbnRfc2l6ZSI6IiIsImJ1dHRvbl9mb250X3dlaWdodCI6IiIsInNob3dfcmVhZF9tb3JlX2J1dHRvbiI6IjEiLCJhdXRvbWF0ZWRfaW5jbHVkZSI6Im5ldyIsImF1dG9tYXRlZF9ub19jb250ZW50cyI6Ik5vIG5ldyBwb3N0cyBieSBub3chIiwiYXV0b21hdGVkIjoiIiwibGF5b3V0IjoiYmlnLWltYWdlIiwiaW5saW5lX2VkaXRzIjpbXSwiZXhjZXJwdF9sZW5ndGgiOiI2OCIsInRheF9jYXRlZ29yeSI6WyI0MyJdLCJ0YWdfcG9zdF90YWciOiIiLCJ0YWdfcG9zdF9mb3JtYXQiOiIiLCJibG9ja19pZCI6ImNwdCJ9" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
    <tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
            
  

                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
                <tbody><tr>
                    <td align="center">
                        <a href="https://ilborgodiparma.net/autonomia-differenziata-e-principi-fondamentali-di-monica-cocconi?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=cocconi_img" target="_blank" rel="noopener nofollow" style="display: inline-block; font-size: 0; text-decoration: none; line-height: normal!important"><img src="https://ilborgodiparma.net/wp-content/uploads/2023/02/Monica_Cocconi_Borgo.jpeg" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding-top: 30px; border: 0; font-size: 12px" class=""></a>                </td>
                </tr>
            </tbody></table>
        
        <table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
            <tbody><tr>
                <td>

                    <table border="0" cellspacing="0" cellpadding="0" width="100%">


                        <tbody><tr>
                                 <td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
                                    AUTONOMIA DIFFERENZIATA E PRINCIPI FONDAMENTALI di Monica Cocconi                        <hr style="width: 20%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
                        </tr>

                            
                        
                                                <tr>
                                <td align="left" style="font-size: 16px;font-family: Open-sans, Geneva, sans-serif; font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9484" dir="ltr">
                                   La recente proposta sull’attuazione dell’autonomia differenziata prevista dall’art. 116, comma terzo della Costituzione, ossia del riconoscimento alle regioni ordinarie di «ulteriori forme e condizioni ...                           </td>
                            </tr>
                        
                                                <tr>
                                 <td align="right" inline-class="button">
                                     <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 5px" align="right"><tbody><tr><td align="center" bgcolor="#ffff" role="presentation" style="border:1px solid #dd3333 !important; cursor:auto;mso-padding-alt:10px 25px; background:#ffff" valign="middle"><a href="https://ilborgodiparma.net/autonomia-differenziata-e-principi-fondamentali-di-monica-cocconi?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=cocconi_but" style="display:inline-block;background:#ffffff;color:#dd3333;font-family: Open-sans, Geneva, sans-serif;font-size:14px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank">CONTINUA</a></td></tr></tbody></table>                         </td>
                            </tr>
                                            <tr>
                                                    <td style="padding-bottom:0px; padding-top:25px">   <hr align="left"  noshade="noshade" color="#dd3333" size="1px"> </td>

                        </tr>
                    </tbody></table>




                </td>
            </tr>
        </tbody></table>

        
        
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
                <tbody><tr>
                    <td align="center">
                        <a href="https://ilborgodiparma.net/la-tutela-dei-diritti-delle-persone-in-stato-di-detenzione-di-veronica-valenti-garante-comunale-dei-diritti-delle-persone-private-della-liberta-personale-di-parma?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=valenti_img" target="_blank" rel="noopener nofollow" style="display: inline-block; font-size: 0; text-decoration: none; line-height: normal!important"><img src="https://ilborgodiparma.net/wp-content/uploads/2023/02/Veronica_valenti_parma.jpeg" width="570" height="297" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding-top: 30px; border: 0; font-size: 12px" class=""></a>                </td>
                </tr>
            </tbody></table>
        
        <table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
            <tbody><tr>
                <td>

                    <table border="0" cellspacing="0" cellpadding="0" width="100%">


                        <tbody><tr>
                                 <td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
                                    LA TUTELA DEI DIRITTI DELLE PERSONE IN STATO DI DETENZIONE di Veronica Valenti                        <hr style="width: 25%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
                        </tr>

                                      
                                                <tr>
                                <td align="left" style="font-size: 16px;font-family: Open-Sans, Geneva, sans-serif;font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9240" dir="ltr">
                                    E’ davvero un onore per me ricoprire l’incarico di Garante comunale dei diritti delle persone private della libertà personale. E il fatto che il Comune di Parma abbia inteso istituire tale Ufficio dimostra la sensibilità della ...                           </td>
                            </tr>
                        
                                                <tr>
                                 <td align="right" inline-class="button">
                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 5px" align="right"><tbody><tr><td align="center" bgcolor="#fff" role="presentation" style="border:1px solid #dd3333; cursor:auto;mso-padding-alt:10px 25px;background:#fff" valign="middle"><a href="https://ilborgodiparma.net/la-tutela-dei-diritti-delle-persone-in-stato-di-detenzione-di-veronica-valenti-garante-comunale-dei-diritti-delle-persone-private-della-liberta-personale-di-parma?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=valenti_but" style="display:inline-block;background:#ffffff;color:#dd3333;font-family: Open-sans, Geneva, sans-serif; font-size:14px; font-weight:bold; line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank">CONTINUA</a></td></tr></tbody></table>                            </td>
                            </tr>
                                            <tr>
                                                    <td style="padding-bottom:0px; padding-top:25px">   <hr align="left"  noshade="noshade" color="#dd3333" size="1px"> </td>

                        </tr>
                    </tbody></table>

             </td>
            </tr>
        </tbody></table>


       <center><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/Oltrelemura_Newsletter.png" width="" alt="" border="0" style="display: block; max-width: 400px !important; width: 400px !important; padding: 0; border: 0; font-size: 12px"></center>
        
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
                <tbody><tr>
                    <td align="center">
                        <a href="https://ilborgodiparma.net/oltrelemura-del-02-02-2023-di-graziano-vallisneri?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=oltrelemura_img" target="_blank" rel="noopener nofollow" style="display: inline-block; font-size: 0; text-decoration: none; line-height: normal!important"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/10/Oltrelemura_web-e1667502181350-1170x535.jpeg" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding: 0; border: 0; font-size: 12px" class=""></a>                </td>
                </tr>
            </tbody></table>
        
        <table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
            <tbody><tr>
                <td>

                    <table border="0" cellspacing="0" cellpadding="0" width="100%">


                        <tbody><tr>
                                 <td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
                                    OLTRELEMURA del 02.02.2023 a cura di Graziano Vallisneri                        <hr style="width: 25%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
                        </tr>

                                     
                        
                                                <tr>
                                <td align="left" style="font-size: 16px;font-family: Open-Sans, Geneva, sans-serif;font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9194" dir="ltr">
                                   
   

                         </td>
                            </tr>
                        
                                                <tr>
                                 <td align="right" inline-class="button">
                                     <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 0px" align="right"><tbody><tr><td align="center" bgcolor="#fff" role="presentation" style="border:1px solid #dd3333; cursor:auto;mso-padding-alt:10px 25px;background:#fff" valign="middle"><a href="https://ilborgodiparma.net/oltrelemura-del-02-02-2023-di-graziano-vallisneri?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=oltrelemura_but" style="display:inline-block;background:#ffffff;color:#dd3333;font-family: Open-Sans, Geneva, sans-serif;font-size:14px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank">CONTINUA</a></td></tr></tbody></table>                            </td>
                            </tr>
                                            
                            <td style="padding-top:25px">   <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>

                      
                    </tbody></table>

            
        </tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="image">
    <tb0;" class="edit-block"><!--[if mso | IE]><table ="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MCwiYmxvY2tfcGFkZGluZ19sZWZ0IjowLCJibG9ja19iYWNrZ3JvdW5kIjoiIiwiYmxvY2tfYmFja2dyb3VuZF8yIjoiIiwiYmxvY2tfd2lkdGgiOjYwMCwiYmxvY2tfYWxpZ24iOiJjZW50ZXIiLCJpbWFnZSI6eyJpZCI6IjE1MzM0IiwidXJsIjoiaHR0cDpcL1wvcHJvdmFib3Jnby5pdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTFcL2ZhY2Vib29rLW5ld2xldHRlci5qcGcifSwiaW1hZ2UtYWx0IjoiIiwidXJsIjoiIiwid2lkdGgiOiIxMDAiLCJhbGlnbiI6ImNlbnRlciIsImlubGluZV9lZGl0cyI6IiIsInBsYWNlaG9sZGVyIjoiIiwiaW1hZ2UtdXJsIjoiaHR0cDpcL1wvcHJvdmFib3Jnby5pdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTFcL2ZhY2Vib29rLW5ld2xldHRlci5qcGciLCJibG9ja19pZCI6ImltYWdlIn0=" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
    <tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%"><tbody><tr><td align="center"><a href="https://www.facebook.com/CircoloilBorgo"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/seguici-anche-su-facebook.jpg" width="100" height="43" alt="" border="0" style="display: block; max-width: 200px !important; width: 100%; padding: 0; border: 0; font-size: 12px"></a></td></tr></tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="footer">
    <tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="margin-top: 0; 600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsInZpZXciOiJHdWFyZGEgb25saW5lIiwidmlld19lbmFibGVkIjoiMSIsInByb2ZpbGUiOiJHZXN0aXNjaSBpIHR1b2kgYWJib25hbWVudGkiLCJwcm9maWxlX2VuYWJsZWQiOiIxIiwidW5zdWJzY3JpYmUiOiJEaXNpc2NyaXZpdGkiLCJ1bnN1YnNjcmliZV9lbmFibGVkIjoiMSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImZvbnRfd2VpZ2h0IjoiIiwidXJsIjoicHJvZmlsZSIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoiZm9vdGVyIn0=" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">

    <tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><a style="font-size: 11px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #dd3333; text-decoration: none; line-height: normal;" href="https://ilborgodiparma.net/contatti?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=contatti_link" target="_blank">Circolo Il Borgo di Parma - Via A. Turchi 15A Parma 43125 - Telefono: 0521284203</a><br><span style="font-size: 10px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;">Per aggiornare o cancellare la tua iscrizione</span><a style="font-size: 10px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;" href="{profile_url}" target="_blank"> clicca qui.</a><br><br><a style="font-size: 11px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;" href="https://www.p40.us/" target="_blank">Progetto e realizzazione</a><a style="font-size: 11px;font-family:'trebuchet ms', Geneva, sans-serif;font-weight: 700; color: #222222; text-decoration: none; line-height: normal;" href="https://www.p40.us/" target="_blank"> P40.</a></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table>


    <!-- /tnp -->

    </body>
    </html>

1

There are 1 best solutions below

2
On

Outlook desktop does this when you do not specify a width attribute in images (width="x"). It will then use the native width of the image, which of course could be 1000px+.

Ensure you add the correct width attribute to all your images that you want Outlook to use. Continue to use style="width:xx" for everything else (this will take priority on everything except for Outlook, which ignores it completely).

e.g. change this:

<img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px">

Into this:

<img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="500" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px">

Do not use "px" or other measurement in a width attribute. It should be just a number.