Menu icon Foundation
Outlook breaks image column width

So im new to inky for mail but ive run into this problem that im not sure how to solve. I even stripped out all my own code and tried with Inky template to see if its my code or not. It seems it still breaks with the inky email template.

How it suppose to look like, and looks like in browser:

What it looks like in outlook:

 

 

Simple code im using for this:

<style type="text/css">
  body,
  html,
  .body {
    background: #f3f3f3 !important;
  }
</style>



<container>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <center>
        <img src="http://placehold.it/548x200">
      </center>
    </columns>
  </row>
  <row>
    <columns large="12">
      <h2>This is a title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
      <p><a href="#">Learn more</a></p>
    </columns>
  </row>
  <row>
    <columns large="6">
		<img class="small-float-center" src="http://d33wubrfki0l68.cloudfront.net/f6f00d702cf35a9410c0bb82efdbf62ebe36d2f1/cf0a6/assets/img/toilet.jpg">
      <h4>Sub Section Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
    </columns>
    <columns large="6">
		<img class="small-float-center" src="http://d33wubrfki0l68.cloudfront.net/f6f00d702cf35a9410c0bb82efdbf62ebe36d2f1/cf0a6/assets/img/toilet.jpg">
      <h4>Sub Section Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
    </columns>
  </row>
  <row>
    <columns>
      <p>You received this email because you're signed up to receive updates from us. <a href="#">Click here to unsubscribe.</a></p>
    </columns>
  </row>
</container>

Outlookmail2016

So im new to inky for mail but ive run into this problem that im not sure how to solve. I even stripped out all my own code and tried with Inky template to see if its my code or not. It seems it still breaks with the inky email template.

How it suppose to look like, and looks like in browser:

What it looks like in outlook:

 

 

Simple code im using for this:

<style type="text/css">
  body,
  html,
  .body {
    background: #f3f3f3 !important;
  }
</style>



<container>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <center>
        <img src="http://placehold.it/548x200">
      </center>
    </columns>
  </row>
  <row>
    <columns large="12">
      <h2>This is a title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
      <p><a href="#">Learn more</a></p>
    </columns>
  </row>
  <row>
    <columns large="6">
		<img class="small-float-center" src="http://d33wubrfki0l68.cloudfront.net/f6f00d702cf35a9410c0bb82efdbf62ebe36d2f1/cf0a6/assets/img/toilet.jpg">
      <h4>Sub Section Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
    </columns>
    <columns large="6">
		<img class="small-float-center" src="http://d33wubrfki0l68.cloudfront.net/f6f00d702cf35a9410c0bb82efdbf62ebe36d2f1/cf0a6/assets/img/toilet.jpg">
      <h4>Sub Section Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
    </columns>
  </row>
  <row>
    <columns>
      <p>You received this email because you're signed up to receive updates from us. <a href="#">Click here to unsubscribe.</a></p>
    </columns>
  </row>
</container>
Corey Schaaf over 1 year ago

The problem is that you're trying to put to images in the same row who's total width is 1200px wide. (each images native size is 600px wide.  The width of your email is most likely between 580 and 600 with me just eye balling it.  

You need to add height="" and width="" attributes to your images.  What this means is you need to figure out what the max width of your two columns is and then specify and image size that is <= (less than or equal to) the width of each column. 

Once you do that, the images should size down to whatever values you've specified. 

Danny van Zon 3 months ago

Hi, I believe i have a similar problem. i have a two column row breaking out in for example Office 365 Firefox Windows 7. I also have two images that together are wider than the container width but even sizing them down as @corey said does not work for me. 

I'ts driving me nuts not knowing how to do this.

Added the code (without the columns and containers above) below as well as a screenshot from EOA.

<row style="max-width:580px !important;">
      <td style="max-width:580px !important;">
        <row style="max-width:580px !important;">
        <columns large="6">
          <table width="100%" style="max-width:580px;">
            <tr>
              <td>
                <img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="" alt="">
              </td>
            </tr>
          </table>
            <div style="padding:20px;">
              <h3 style="color:black" class="text-left">Kop 1</h3>
              <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                <br>
              </p>
              <p><a href="https://www.coosto.com"><span style="color:#ec4756" class="text-left"><strong>linkerino</strong></span></a></p>
            </div>
        </columns>
        <columns>
          <table width="100%" style="max-width:580px;">
            <tr>
              <td>
                <img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="" alt="">
              </td>
            </tr>
          </table>          <div style="padding:20px;">
            <h3 style="color:black" class="text-left">Kop 1</h3>
            <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              <br>
            </p>
            <p><a href="https://www.coosto.com"><span style="color:#ec4756" class="text-left"><strong>linkerino</strong></span></a></p>
          </div>
        </td>
      </row>

Look forward to your help ;)

Corey Schaaf 3 months ago

Out of curiosity, the code above looks like you're using INKY and writing some additional html markup? Is that correct? If you are, I'm not sure why you're doing that (you may have a good reason) but it looks like you don't need certain things and you don't need to add additional TD between <row> and <columns> tags.  

 

The above in addition to the problem with your images is you're putting them inside a table and setting a max-width of 580px.  Outlook is probably just interpreting that as make this table 580px. You're also missing the value of the height="" ... without the height value the images won't scale correctly.  

 

Keep in mind, outlook is not responsive so the best you're hoping to achieve is a good looking desktop version. 

 

I would write what you have like this (note I just added a value in for both images height, you will most likely need to adjust that depending on the size of your image): 

Danny van Zon 3 months ago

Hi Corey,

 

Sorry took some time to get back to you. The previous days i wasn't able to load this post since it had been removed (or at least it said so for me)

Regarding your question about inky. Yes i'm using inky and am in fact also using regular html. The reason is because i thought that would be fine. But as of now ill keep it to inky only ;)

For some reason i also can't see the image code you've written but ill try to add height to the images and strip them of the tables etc. If that doesn't work i'll come back to you.

 

Thanks a lot for helping me! 

Paulette Gracia 3 months ago

these are some detail tips. 

Wally Glenn 3 months ago

Danny,

I work with Outlook all the time since half of my customer base uses Outlook.

In my case I want a maximum width of 580px for an image. When using Foundation for Emails 2, this is the code I use for a full-width table to get those results:

<container>
  <row>
    <columns small="12" large="12">
      <img src="http://sample.com/images/hero.jpg" width="580" align="center" border="0" style="max-width: 580px;"/>
    </columns>
  </row>
</container>

The reason to specify the maximum desktop width is that if you use max-width: 100%, some desktop email clients like AOL will stretch the image to fill the entire screen.

Good luck.

Corey Schaaf 3 months ago

 Here is the code I was trying to paste. Foundation's forums are horrible and anytime you try to show code, it flags it as spam it seems. I sent this post to the engineers and they turned the post back on, but seemed to  have left out my code. I will try to post it again for you. 

<row>
          <columns large="6">
            <img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="157" alt="">
            <div style="padding:20px;">
              <h3 style="color:black" class="text-left">Kop 1</h3>
              <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
              <p>
                <a href="https://www.coosto.com">
                  <span style="color:#ec4756" class="text-left">
                    <strong>linkerino</strong>
                  </span>
                </a>
              </p>
            </div>
          </columns>
          <columns>
            <img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="157" alt="">
            <div style="padding:20px;">
              <h3 style="color:black" class="text-left">Kop 1</h3>
              <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
              <p>
                <a href="https://www.coosto.com">
                  <span style="color:#ec4756" class="text-left">
                    <strong>linkerino</strong>
                  </span>
                </a>
              </p>
            </div>
          </columns>
        </row>

Danny van Zon 3 months ago

Hi Corey,

Ah that is why the post got removed. Thanks for all the help!