-2

In a nutshell I'm using exact target content builder, I uploaded the code into litmus, and of course Outlook 07,10,13 isn't recognizing width 100%. I have attached a screen shot as well as the snippet please assist.

Bad outlook

How i

<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><a href="sample" title="" alias="" conversion="false" data-linkto="https://"><img data-assetid="35955" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0edcfa8c-25ad-4b12-8d69-501bde9332ef.jpg" alt="Grocery Discounts" height="45" width="900" style="height:45px;width:900px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></table>
Clay
  • 37
  • 3
  • 10
  • Which part of outlook is not respecting 100%? The table? Check the padding on the top (_Monthly member exclusive_) section. I have a feeling its causing the issue. Since you havent provided full code that is as much help as we can give. – Syfer Jul 19 '17 at 01:38
  • @Syfer it wont allow me to post full. Here is the Email you can copy source from it. please help: http://view.email-nyaaa.com/?qs=e8464482f2f8d08d8cb096dfa59ffe7e52e507154d4913143bc1bbdc88c909be06c008772f05343ab9cc746a7ced364f0b71c6374b3481ebcba327c178e0788ef43cb4d4d82fc410 – Clay Jul 19 '17 at 13:20
  • https://jsfiddle.net/jgq60p49/ – Clay Jul 19 '17 at 13:41
  • Hey Clay, did the fix work? – Syfer Jul 25 '17 at 07:23

2 Answers2

1

Stack overflow wouldnt allow me to paste the code as well.The offending line was 296. You or the platform had placed a 10px padding around the two column block (extra virgin & long grain one). Once you remove it then it works.

Snippet: 

<table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center"><a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35860" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/bf2a32d2-c271-4dd0-88d4-fa1ed13a0668.jpg" alt="$1.00 off California Olive Ranch Olive Oil / $1.00 off Lundberg Family Farms Organic Brown Rice" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; font-size: 13px;"></a></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center">
<a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35987" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/3877ff31-7a70-4583-8af9-8cf78ef2032d.jpg" alt="$1.00 off V8 Original Vegetable Juice &amp; Naked Juice Smoothie" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

You can replace that code on your template or copy the code from fiddle that is in the comment.

Here is the result of the fix. enter image description here

Cheers

Syfer
  • 4,262
  • 3
  • 20
  • 37
-1

Outlook doesn't really like width="100%" and it doesn't like inline CSS. So set your width on the image to width="920" and in style, keep the width:100%; which other browsers will use.

This is the table as an example:

<table width="100%" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="center">
        <a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title=""   data-linkto="https://"><img data-assetid="35864" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/b1be6e76-4a9f-4e7a-89cc-5adf22373d62.jpg" alt="View your current grocery savings" height="auto" width="920" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a>
      </td>
    </tr>
  </tbody>
</table>

I should add that your hero image is 900 pixels, which is 100 pixels wider than some email clients like Outlook and Gmail really support. Keep that in mind if you're having issues with other email clients.

You should look at your emails on an iPhone because it's a mess. The same with AOL. In every desktop email client, you have alignment issues with the Discounts Rewards banner.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • Dude, calm down. Outlook does not always respect image widths. If you set a wider image width, you can overcome this and set the proper size in the style tag. Gmail supports a maximum width of 800 pixels. Look it up. Outlook doesn't support padding. Look it up. I ran your code and the iPhone issues are still there. Grow up. – gwally Jul 20 '17 at 17:49
  • It's not about growing up. Not sure how you are coding but outlook supports padding either you place it individually for each sides or the other way. Also outlook (windows) doesn't read style tags. – Syfer Jul 20 '17 at 20:25