Menu icon Foundation
Varying email results

I am not new to foundation, but I have only been working with their Email sass stack for a few weeks. I have a fairly simple layout that tests well in Litmus and locally, however the actual results when being received by an email client are very different. 

2 major issues for example, when the email is sent:

1) the outside container for the email template stops half way down the body of the email. 

2) I have 1 out of 6 images that refuses to display (in testing it works fine). I am using the direct s3 address for my images, and I have went as far to try a different image. The design has 5 images distributed across 2 rows, its always the 5th image that refuses to display (i have tried different images in that slot).

I am not sure how to proceed given that Litmus sees no issue with the code (although I assume its an oversight on my part due to the learning curve). Using the sass stack I inlined my html/css using "npm run build". Below is my markup pre-inline.

email image

@import 'settings';
@import 'foundation';

#gp_logo, #clouds_header {
	background: #3099db;
}
#clouds_header h5 {
	color: #fff;
	text-align: center;
}
.company_greeting {
	margin-top: 15px;
}
#earnings img {
	position: relative;
	left:8px;
}
#earnings p {
	margin-top: 5px;
}
#reliability img {
	position: relative;
	top:5px;
	left: 8px;
}
#reliability p {
	margin-top: 10px;
}
#schedule img {
	position: relative;
	top:10px;
	left: 8px;
}
#schedule p {
	position: relative;
	top:16px;
}
#ratings img {
	position: relative;
	left: 8px;
}
#ratings p {
	margin-top: 10px;
}
#auctions p {
	margin-top: 12px;
}
---
subject: Your GreenPal activity summary
---

<container>
  
  <row>
    <columns small="12" large="12" class="first last">
      <div id="gp_logo">
         <img src="https://www.yourgreenpal.com/assets/gpLogo-7250067eb9559b7ead63801769fd2b0e.png" alt="greenpal">
      </div>     
    </columns>          
  </row>
  
  <row>
    <columns small="12" large="12">
      <div id="">
         <h5 class="text-center">
          Your Weekly Summary for <strong>WeeK STRINGss</strong>
        </h5>
      </div>     
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
      <div class="company_greeting">
        <p>Hi, <strong>Company Name</strong></p>
        <p>We have your weekly business activity overview ready for you!</p>
        <p><a href="https://www.yourgreenpal.com/vendor/vendor_stats">Click here</a> to see details on the following:</p>
      </div>    
    </columns>
  </row>
  <row>
    <columns small="6" large="3" class="large-offset-2">
        <div id="earnings">
           <img src="https://www.yourgreenpal.com/assets/earnings_icon-208228e1ff5f85d56e89a3bbe7807097.png" alt="">
         <p>Earnings</p>
        </div>         
    </columns>
    <columns small="6" large="3">
        <div id="reliability">
         <img src="https://www.yourgreenpal.com/assets/happy-d5e2642a0230ebda4f10242ba62fd5bd.png" alt="">
         <p>Reliability</p>
        </div>         
    </columns>
    <columns small="6" large="3">
        <div id="schedule">
          <img src="https://www.yourgreenpal.com/assets/zurb_calendar_icon-744efc4f5b262e200f1c322359d1d8f1.png" alt="">
          <p>Schedule</p>
        </div>         
    </columns>
  </row>
  <row>    
    <columns small="6" large="3" class="large-offset-3">
        <div id="ratings">
          <img src="https://www.yourgreenpal.com/assets/zurb_auction_icon-717253ca30d70fe7c996d6c2cabe0102.png" alt="">
         <p>Auctions</p>
        </div>         
    </columns>
    <columns small="6" large="5" class="large-offset-1">
        <div id="auctions">
          <img src="https://www.yourgreenpal.com/assets/zurb_review_icon-23970a1449cdeb0a214230a74ff23157.png" alt="">        
          <p>Ratings</p>
        </div>         
    </columns>
  </row>
  <row> 
    <columns small="12" large="12">
        <div id="shop">          
          <img src="https://www.yourgreenpal.com/assets/zurb_shop_icon-5663a5767bf36c2d1b9170673c724929.png" alt="">
          <p>Did you know?</p>
          <p>
            Customers can order service directly from you at your GreenPal store, check your store front out <a href="">here</a>.</p>
          <p>
            You can share this <a href="">link</a> with customers via text or email to order service directly from you.
          </p>
        </div>         
    </columns>
  </row>
</container>

imagesgmailfail

I am not new to foundation, but I have only been working with their Email sass stack for a few weeks. I have a fairly simple layout that tests well in Litmus and locally, however the actual results when being received by an email client are very different. 

2 major issues for example, when the email is sent:

1) the outside container for the email template stops half way down the body of the email. 

2) I have 1 out of 6 images that refuses to display (in testing it works fine). I am using the direct s3 address for my images, and I have went as far to try a different image. The design has 5 images distributed across 2 rows, its always the 5th image that refuses to display (i have tried different images in that slot).

I am not sure how to proceed given that Litmus sees no issue with the code (although I assume its an oversight on my part due to the learning curve). Using the sass stack I inlined my html/css using "npm run build". Below is my markup pre-inline.

email image

@import 'settings';
@import 'foundation';

#gp_logo, #clouds_header {
	background: #3099db;
}
#clouds_header h5 {
	color: #fff;
	text-align: center;
}
.company_greeting {
	margin-top: 15px;
}
#earnings img {
	position: relative;
	left:8px;
}
#earnings p {
	margin-top: 5px;
}
#reliability img {
	position: relative;
	top:5px;
	left: 8px;
}
#reliability p {
	margin-top: 10px;
}
#schedule img {
	position: relative;
	top:10px;
	left: 8px;
}
#schedule p {
	position: relative;
	top:16px;
}
#ratings img {
	position: relative;
	left: 8px;
}
#ratings p {
	margin-top: 10px;
}
#auctions p {
	margin-top: 12px;
}
---
subject: Your GreenPal activity summary
---

<container>
  
  <row>
    <columns small="12" large="12" class="first last">
      <div id="gp_logo">
         <img src="https://www.yourgreenpal.com/assets/gpLogo-7250067eb9559b7ead63801769fd2b0e.png" alt="greenpal">
      </div>     
    </columns>          
  </row>
  
  <row>
    <columns small="12" large="12">
      <div id="">
         <h5 class="text-center">
          Your Weekly Summary for <strong>WeeK STRINGss</strong>
        </h5>
      </div>     
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
      <div class="company_greeting">
        <p>Hi, <strong>Company Name</strong></p>
        <p>We have your weekly business activity overview ready for you!</p>
        <p><a href="https://www.yourgreenpal.com/vendor/vendor_stats">Click here</a> to see details on the following:</p>
      </div>    
    </columns>
  </row>
  <row>
    <columns small="6" large="3" class="large-offset-2">
        <div id="earnings">
           <img src="https://www.yourgreenpal.com/assets/earnings_icon-208228e1ff5f85d56e89a3bbe7807097.png" alt="">
         <p>Earnings</p>
        </div>         
    </columns>
    <columns small="6" large="3">
        <div id="reliability">
         <img src="https://www.yourgreenpal.com/assets/happy-d5e2642a0230ebda4f10242ba62fd5bd.png" alt="">
         <p>Reliability</p>
        </div>         
    </columns>
    <columns small="6" large="3">
        <div id="schedule">
          <img src="https://www.yourgreenpal.com/assets/zurb_calendar_icon-744efc4f5b262e200f1c322359d1d8f1.png" alt="">
          <p>Schedule</p>
        </div>         
    </columns>
  </row>
  <row>    
    <columns small="6" large="3" class="large-offset-3">
        <div id="ratings">
          <img src="https://www.yourgreenpal.com/assets/zurb_auction_icon-717253ca30d70fe7c996d6c2cabe0102.png" alt="">
         <p>Auctions</p>
        </div>         
    </columns>
    <columns small="6" large="5" class="large-offset-1">
        <div id="auctions">
          <img src="https://www.yourgreenpal.com/assets/zurb_review_icon-23970a1449cdeb0a214230a74ff23157.png" alt="">        
          <p>Ratings</p>
        </div>         
    </columns>
  </row>
  <row> 
    <columns small="12" large="12">
        <div id="shop">          
          <img src="https://www.yourgreenpal.com/assets/zurb_shop_icon-5663a5767bf36c2d1b9170673c724929.png" alt="">
          <p>Did you know?</p>
          <p>
            Customers can order service directly from you at your GreenPal store, check your store front out <a href="">here</a>.</p>
          <p>
            You can share this <a href="">link</a> with customers via text or email to order service directly from you.
          </p>
        </div>         
    </columns>
  </row>
</container>

Corey Schaaf over 3 years ago

Ross, I noticed you have a blank URL in your code.  I know from past experiences that can cause issues when you inline.  There needs to be something (like a test url) there.  Not saying this is the smoking gun but it's the only thing I can find that might be causing the problem. 

Corey Schaaf over 3 years ago

This is a note I found from a previous foundation post: 

//"Yes! Holy. Smokes. Outlook.com and Office 365
//need your anchor tags to actually have a proper
//link to render. 15 iterations later, and we've
//finally narrowed down this painfully simple bug.
//Emails are hard sometimes."

Ross Brooks over 3 years ago

Thanks Corey! I cleaned up the blank URL's but the email still has the same issues (mostly in gmail). One random image never loads, and the body container stops half way down the email. 

I spoke with a Litmus help desk person, they didnt see anything either but they recommended that I opt-in for some of their paid services. (Touche)

Corey Schaaf over 3 years ago

Have you tried plugging in these same images to one of the templates that zurb pre-packages with the install?