Foundation-emails: [Foundation for Emails] Full Width Image in Large-12

Created on 4 Jul 2016  路  5Comments  路  Source: foundation/foundation-emails

I noticed a bug on Outlook 2000, Outlook 2003. The Image that suppose to show as full width (edge to edge of the container) is getting resized by half. At first I thought it was regards to the DPI issue regarding outlook but that's with more up to date versions, but i discovered from a different issue on here its to do with the .expander

My code i used..

<row><columns small="12" large="12"><img src="1.jpg" width="700" alt="test"></columns></row>

after NPM RUN BUILD... everything looks great besides on the older outlooks, I had to remove the..

<th class="expander" style="....."></th>

which seem to cause the issue resizing my images, but its all working fine now. So I have resolved this, but what am asking is there anyway we can have the option having the "expander" as a option or to detect if needed?

something like

<row><columns small="12" large="12" expander="no">...</columns></row>

Most helpful comment

There is a data attribute now in 2.2.1 that will remove the expander. It will help in these few instances where it does not help us :)

<container>
  <row>
    <columns small="12" large="12" no-expander>
      <h4 class="small-text-center">What is the deal?</h4>
      <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
    </columns>  
  </row>
</container>

All 5 comments

There is a data attribute now in 2.2.1 that will remove the expander. It will help in these few instances where it does not help us :)

<container>
  <row>
    <columns small="12" large="12" no-expander>
      <h4 class="small-text-center">What is the deal?</h4>
      <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
    </columns>  
  </row>
</container>

Brilliant Rafi! Thank you!

@rafibomb Is this documented anywhere? I was struggling with something as simple as this:

---
layout: index-layout
subject: My Email Templates
---

<container>
  <row><columns>
    <img src="http://unsplash.it/596/400?random" width="596" height="400" style="width:596px;height:400px;">
  </columns></row>
</container>

This alone makes it so that the image doesn't extend to the full width of the email in Outlook 2000, 2002, and 2003 -- despite having a width attribute and width in the style attribute -- unless I add no-expander. This GitHub issue is the only place I've seen this.

screen shot 2017-04-21 at 4 01 49 pm

Thx @rafibomb for the hint with no-expander Did I overlook this in the documentation? Full column size Images now expand as expected, even in Outlook 2003.

Just found this too!

After banging my head against the desk for too long. This no-expander attribute needs to be more visible in the documentation.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dnglr picture dnglr  路  5Comments

lspoor picture lspoor  路  5Comments

rockse picture rockse  路  3Comments

jasonmarkle picture jasonmarkle  路  4Comments

GBratsos picture GBratsos  路  4Comments