Mailchimp affects my Outlook-specific conditional comments in HTML

Question

I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).

Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?

My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.

Screenshots:

when Mailchimp sends the email to Outlook (what went wrong)

when the HTML is rendered for Outlook directly (what it's supposed to look like)

Conditional comments:

I've put in Outlook-specific conditional comments like so:

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->

<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>

<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

Thank you for the help! Really appreciate it.

Answer 1

I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:

Outlook doesn’t recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them to MailChimp, or use our built-in image editor.

source: MailChimp Knowledge Base

I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.

Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it. But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.

If it may help in any way; see my code below that I used in my templates to make it fluid.

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>

Answer 2

Are you using retina images in your emails? From experience I have found that outlook's, if they are given a big image, they display it at a big size if a specific width is not assigned to the img tag. Below is an example of a code i use for the images in my emails.

<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">

Also can you post the img tag of the offending element so i can have a look at it better please?

Cheers