Menu icon Foundation
Issue with full width images and nesting question

Hi guys, 

 

I'm just starting to try Foundation for Emails and I think it's a great framework that I would like to use it for all my future email projects. 

Unfortunately, I'm stuck with my hero image. Everything works fine with all the mail clients except with Outlook 2000, 2002, 2003. 

As you can see in the previews, I have tried in 2 different ways : the first with a row and a column and the second with the wrapper tag. The image in the wrapper tag doesn't appear and the image in the row doesn't fit with the max-width of container. 

The previews in litmus : 

Preview in litmus

and my code : 

 

<container>

  <row class="welcome__row-1 collapse">
    <columns class="welcome__row-1__col1" small="12" large="12">
      <center>
        <img class="welcome__visual" align="center" width="600" height="315" src="{{welcome.visual}}" alt="{{welcome.alt}}" />
      </center>
    </columns>
  </row>

  <wrapper class="welcome__row-1">
    <img class="welcome__visual" align="center" width="600" height="315" src="{{welcome.visual}}" alt="{{welcome.alt}}" />
  </wrapper>

</container>

 

I can find out how to make a full width image inside a container (without right and left paddings)

Anyone can help me to solve my issue? :) 

 

Thanks a lot! 

 

emailOutlookimagefull widthwidthFoundation for Email

Hi guys, 

 

I'm just starting to try Foundation for Emails and I think it's a great framework that I would like to use it for all my future email projects. 

Unfortunately, I'm stuck with my hero image. Everything works fine with all the mail clients except with Outlook 2000, 2002, 2003. 

As you can see in the previews, I have tried in 2 different ways : the first with a row and a column and the second with the wrapper tag. The image in the wrapper tag doesn't appear and the image in the row doesn't fit with the max-width of container. 

The previews in litmus : 

Preview in litmus

and my code : 

 

<container>

  <row class="welcome__row-1 collapse">
    <columns class="welcome__row-1__col1" small="12" large="12">
      <center>
        <img class="welcome__visual" align="center" width="600" height="315" src="{{welcome.visual}}" alt="{{welcome.alt}}" />
      </center>
    </columns>
  </row>

  <wrapper class="welcome__row-1">
    <img class="welcome__visual" align="center" width="600" height="315" src="{{welcome.visual}}" alt="{{welcome.alt}}" />
  </wrapper>

</container>

 

I can find out how to make a full width image inside a container (without right and left paddings)

Anyone can help me to solve my issue? :) 

 

Thanks a lot! 

 

Rafi Benkual about 3 years ago

I think the issue is being cased by the second piece of code. What is outcome you are going for with the wrapper and the image?

You really need something with a fixed width surrounding the image to contain it in Outlook and Gmail. I added rows and columns inside the wrapper and it tested perfectly.

<container>

  <row class="welcome__row-1 collapse">
    <columns class="welcome__row-1__col1" small="12" large="12">
      <center>
        <img class="welcome__visual" width="600" height="315" src="http://placehold.it/600x315" alt="{{welcome.alt}}" />
      </center>
    </columns>
  </row>

  <wrapper class="welcome__row-1">
    <row class="welcome__row-1 collapse">
      <columns class="welcome__row-1__col1" small="12" large="12">
        <center>
          <img class="welcome__visual" width="600" height="315" src="http://placehold.it/600x315" alt="{{welcome.alt}}" />
        </center>
      </columns>
    </row>
  </wrapper>

</container>

MagicSass about 3 years ago

Hi Rafi,

Thanks for your reply! 

I tried both solutions in Litmus but no luck in Outlook 2000, 2002, 2003.  :(

In fact, I just want to make a full hero image at the top of my email. As you can see the print screen of litmus, it works perfectly in Outlook 2007 and other clients but fails in the previous version of outlook. I cannot make it works on those versions. Are they not supported by foundation for emails? 

Maybe can show me how to create this full width image? 

(Pictures : example with the wrapper you gave to me)

Outlook 2000, 2002, 2003Outlook 2007

Corey Schaaf about 3 years ago

Quick question, is the overall width of your email 600px? Also, do me a favor and remove the center tags from your images. If they are already full width then the center tag may be the issue. There is currently a fix being worked on in regards to the center tag. 

One other thing, remove all your own classes from the code, you might just be experiencing a conflict from some of your own CSS that you're including. 

Rafi Benkual about 3 years ago

 Good suggestions Corey!

BTW  the code I pasted above tested perfectly on all Outlook, Gmail and others. https://litmus.com/checklist/emails/public/e6e42b0

MagicSass about 3 years ago

@Corey & @ Rafi, thanks to both of you! 

Indeed there was a conflict with some of my css :) I need to find where comes the trouble but now it works nicely :) 

I have an other quick question :can we nested row & columns inside columns? does it work properly? :)

<container>
  <row>
    <columns>
      <row>
        <columns>
          ...
        </columns>
      </row>
    </columns>
  </row>
</container>

Corey Schaaf about 3 years ago

Yes. You can nest but at some point it just becomes rediculous depending on your layout. Just becarefuk of your html file being so large that it gets clipped in gmail or yahoo clients. 

MagicSass about 3 years ago

Yes of course! :) 

Once again thanks for your reply! Quick, fast and useful! 
Very nice people at Zurb and on this forum! :)

Have a nice day! :)