Menu icon Foundation

Developer

This forum is sending me 50 junk emails a day. Goodbye.

My Posts



  • 4
    Replies
  • How can I get Zero Sass / CSS?

    By Wally Glenn

    Sasscsshtml

    How do I remove the base CSS from an email? I removed everything from the SASS file, the layout, the page and I still get CSS when I run Foundation build. The problem is that these values are not wanted in the final email. I have copied the styles back ... (continued)

    Last Reply by Brinto Shalin about 2 years ago



  • 1
    Reply
  • Customize Inliner?

    By Wally Glenn

    html emailcustom Inky

    Is it possible to customize the Zurb Inliner so it creates a <style> sheet in the head and doesn't inline css values? I have a desire to to include a style sheet with an email, the information from the template, but I'm finding inlining creates it'... (continued)

    Last Reply by cs joshi over 1 year ago




  • 1
    Reply
  • Change Build Order

    By Wally Glenn

    emailSass

    I'm noticing when I run Foundation watch, the inline style for Margin loads before margin. I'd like to reverse that.I have tried to move things around in my sass file, but I have not discovered a way to easily manipulate the load order.Is there some ... (continued)

    Last Reply by cs joshi over 1 year ago




My Comments

Wally Glenn commented on Jamie's post almost 2 years

I tested your code solution in Litmus to see what happens and your problem isn't fixed.
Good luck on your cleanliness of code.
I'm done.
 

Wally Glenn commented on Jamie's post almost 2 years

By default, Zurb really forces the <tr> and the <th> to float:left. This is fine for mobile, but for desktop, I wanted my right column to be flush right, minus a few pixels for alignment. This is what I found works.
Try this for your html block:
<wrapper class="callout-inner">
<center>
<container class="callout-inner">
<row>
<columns large="7" small="12">
<a href="http://placekitten.com" target="_blank"><img class="deltalogo small-text-right" style="display: block;" border="0" alt="Placekitten" src="http://placekitten.com/184/45" width="184" height="45"></a>
</columns>
<columns large="5" small="12">
<p class="right-left" style="color: #432a6f !important; font-size: 12px; padding-top:0;"><a href="http://placekitten.com" target="_blank" style="color: #432a6f; text-decoration: underline;">View this email on the web</a></p>
</columns>
</row>
</container>
</center>
</wrapper>

Add this to your style block:
<style>
.right-left {
text-align: right !important;
}

@media only screen and (max-width: #{$global-breakpoint}) {

.right-left {
  text-align: left !important;
}

}
</style>
 
This works reliably with most email clients.
Good luck.
 
 

Wally Glenn commented on Tony Strack's post almost 2 years

I'm not having any troubles using this doctype: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Is there something that is stripping it out of your gulpfile when you run foundation build to create your final emails? 

Wally Glenn commented on Annie Robinson's post almost 2 years

This forum is so done, the spambots are carrying on their own conversations and it seems more supportive than the ones trying to solve actual problems.

Wally Glenn commented on Brad Shomer's post about 2 years

I typed "foundation -v" and npm reported back the version number. I did it again and I got this message:
Update available: 2.2.5 (current: 2.2.3)
Run npm update -g foundation-cli to update.
I typed it in and the update took very little time.

Wally Glenn commented on Jason's post about 2 years

You mean something like this:
<wrapper>
<center>
<container>
<row>
<columns>
<center>
CONTENT
</center>
</columns>
</row>
</container>
</center>
</wrapper>
Or just try adding <center></center> with your current code.

Wally Glenn commented on Danny van Zon's post about 2 years

Your html code is a mess. You have an open row that doesn't close, a a table cell with no table.
Start a new html page and stick to something simple like this:
<container>
<row>
<columns large="12">
full width
</columns>
</row>
<row>
<columns large="6" small="12">
left
</columns>
<columns large="6" small="12">
right
</columns>
</row>
</container>
Use this as a guide: http://foundation.zurb.com/emails/docs/grid.html
This answer assumes you're attempting to use Foundation for Email 2.0.
From there, customize as you need to fine-tune your html page.
Good luck.

Wally Glenn commented on John's post about 2 years

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.

Wally Glenn commented on Wally Glenn's post about 2 years

siphon or siphon-media-query pulls values from _template.scss, even if you don't link the file to your sass.
Are there other files that get automatically pulled in? 
It's really annoying because for some reason the values are given precedence over my SASS files. As an example, I don't want a 95% width, f3f3f3 is not a brand color and I don't need a 16px padding, but those values cannot be overwritten in SASS and that's sloppy.
    .pipe($.replace, 'width: 95% !important', 'width: 100% !important')
    .pipe($.replace, 'padding-right: 16px !important;', '')
    .pipe($.replace, 'padding-left: 16px !important;', '')
 
    .pipe($.replace, 'background: #f3f3f3;', '')
How can I identify which SASS files are used automatically and is there a way to stop this and still create a style sheet with my custom values?

Wally Glenn commented on Wally Glenn's post over 2 years

Thanks Rafi.
I have an email that on a mobile device needs the width of images to go edge-to-edge. 
It looks to me like I need to change this specific setting:
@media only screen and (max-width: 596px) {

table.body .container {
width: 95% !important;
}
}
I have tried setting it to width: 100%. Every time I edit this on my custom SASS, it reverts back to width: 95%.
I am trying to troubleshoot where that's coming from, fix it and add back the rest of my SASS files.
To troubleshoot, I created a new scss file with no values to see what would show up when I ran 'foundation build'.
Even though there is no link to the foundation scss files, css values are showing up.
If you have an idea how I can edit those values in the JSFiddle, it would be really great. Then I can really move forward.

Posts Followed

  • 4
    Replies
  • Float for image does not work

    By Jamie

    imagesfloatOutlook

    Hello, &nbsp; Currently I have two images next to each other in the header, but the following class in Outlook 2016 doesn't do its job: float-right &nbsp; Result: See complete code below: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//E... (continued)

    Last Reply by Wally Glenn almost 2 years ago





  • 6
    Replies
  • Center Entire Email

    By Jason

    center

    Hi, I am using <wrapper> around my entire email in the hope that it centers the entire email within the email client. However, nothing I do centers the email, rather it is always left-justified. Is there a way to center the email in the email client? Thanks.

    Last Reply by Sana Amjad about 1 year ago



  • 8
    Replies
  • Outlook breaks image column width

    By John

    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 t... (continued)

    Last Reply by Danny van Zon about 2 years ago


  • 9
    Replies
  • Layout breaks in iOS Mail

    By mxeise

    ioslayoutResponsive

    Hello, I do have a problem with the "responsiveness" of my mail. In the Google Chrome preview, everything looks fine and is responsive as it should be - but on iOS iPhone 6 the layout is not going to "responsive". Any Ideas?Thanks in advance :) Here's m... (continued)

    Last Reply by annysmith about 1 year ago




Following

    No Content

Followers

My Posts







My Comments

You commented on Jamie's post almost 2 years

I tested your code solution in Litmus to see what happens and your problem isn't fixed.
Good luck on your cleanliness of code.
I'm done.
 

You commented on Jamie's post almost 2 years

By default, Zurb really forces the <tr> and the <th> to float:left. This is fine for mobile, but for desktop, I wanted my right column to be flush right, minus a few pixels for alignment. This is what I found works.
Try this for your html block:
<wrapper class="callout-inner">
<center>
<container class="callout-inner">
<row>
<columns large="7" small="12">
<a href="http://placekitten.com" target="_blank"><img class="deltalogo small-text-right" style="display: block;" border="0" alt="Placekitten" src="http://placekitten.com/184/45" width="184" height="45"></a>
</columns>
<columns large="5" small="12">
<p class="right-left" style="color: #432a6f !important; font-size: 12px; padding-top:0;"><a href="http://placekitten.com" target="_blank" style="color: #432a6f; text-decoration: underline;">View this email on the web</a></p>
</columns>
</row>
</container>
</center>
</wrapper>

Add this to your style block:
<style>
.right-left {
text-align: right !important;
}

@media only screen and (max-width: #{$global-breakpoint}) {

.right-left {
  text-align: left !important;
}

}
</style>
 
This works reliably with most email clients.
Good luck.
 
 

You commented on Tony Strack's post almost 2 years

I'm not having any troubles using this doctype: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Is there something that is stripping it out of your gulpfile when you run foundation build to create your final emails? 

You commented on Annie Robinson's post almost 2 years

This forum is so done, the spambots are carrying on their own conversations and it seems more supportive than the ones trying to solve actual problems.

You commented on Brad Shomer's post about 2 years

I typed "foundation -v" and npm reported back the version number. I did it again and I got this message:
Update available: 2.2.5 (current: 2.2.3)
Run npm update -g foundation-cli to update.
I typed it in and the update took very little time.

You commented on Jason's post about 2 years

You mean something like this:
<wrapper>
<center>
<container>
<row>
<columns>
<center>
CONTENT
</center>
</columns>
</row>
</container>
</center>
</wrapper>
Or just try adding <center></center> with your current code.

You commented on Danny van Zon's post about 2 years

Your html code is a mess. You have an open row that doesn't close, a a table cell with no table.
Start a new html page and stick to something simple like this:
<container>
<row>
<columns large="12">
full width
</columns>
</row>
<row>
<columns large="6" small="12">
left
</columns>
<columns large="6" small="12">
right
</columns>
</row>
</container>
Use this as a guide: http://foundation.zurb.com/emails/docs/grid.html
This answer assumes you're attempting to use Foundation for Email 2.0.
From there, customize as you need to fine-tune your html page.
Good luck.

You commented on John's post about 2 years

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.

You commented on Wally Glenn's post about 2 years

siphon or siphon-media-query pulls values from _template.scss, even if you don't link the file to your sass.
Are there other files that get automatically pulled in? 
It's really annoying because for some reason the values are given precedence over my SASS files. As an example, I don't want a 95% width, f3f3f3 is not a brand color and I don't need a 16px padding, but those values cannot be overwritten in SASS and that's sloppy.
    .pipe($.replace, 'width: 95% !important', 'width: 100% !important')
    .pipe($.replace, 'padding-right: 16px !important;', '')
    .pipe($.replace, 'padding-left: 16px !important;', '')
 
    .pipe($.replace, 'background: #f3f3f3;', '')
How can I identify which SASS files are used automatically and is there a way to stop this and still create a style sheet with my custom values?

You commented on Wally Glenn's post over 2 years

Thanks Rafi.
I have an email that on a mobile device needs the width of images to go edge-to-edge. 
It looks to me like I need to change this specific setting:
@media only screen and (max-width: 596px) {

table.body .container {
width: 95% !important;
}
}
I have tried setting it to width: 100%. Every time I edit this on my custom SASS, it reverts back to width: 95%.
I am trying to troubleshoot where that's coming from, fix it and add back the rest of my SASS files.
To troubleshoot, I created a new scss file with no values to see what would show up when I ran 'foundation build'.
Even though there is no link to the foundation scss files, css values are showing up.
If you have an idea how I can edit those values in the JSFiddle, it would be really great. Then I can really move forward.

Posts Followed

Following

  • No Content

Followers