Menu icon Foundation

My Posts

  • NEW
  • Gmail now supports 'display: none;'

    By Ant James

    gmailemailsemail

    Just in case anybody missed this news: Gmail now supports 'display: none;' I'm not sure what the impact (if any) will be for Foundation For Emails, but wanted to start the discussion in case anybody else has a better understanding of the implications. W... (continued)


My Comments

Ant James commented on Jason's post over 2 years

We added a new file to our SASS setup called _custom.scss. Then, in app.scss, added a line as follows 
@import 'custom';
Within that _custom.scss file we write any CSS/SASS that we need to add above and beyond the Foundation For Emails framework. 
You can add the same CSS solution as you were previously using, but to work with the framework it appears you need to put it within a media query. For example:
@media screen and (min-device-width: 1px) {
a[href=tel], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
}
What this does is it ensures that from a screen width of 1px upwards, the CSS fix is applied. It appears that if you don't use the media query, the framework strips this bit of CSS out - which is probably why it's not working for you.

Ant James commented on Ian Daly's post almost 3 years

Hmm, so I think either the Foundation for Emails framework has issues with the Gmail app on Android 4.4, or Litmus' 'Instant Preview' rendering is broken for that same app/Android version.
Here's the Inky markup for a nested two-column section in one of my new templates:
 
<row>
<columns small="12" large="6">
<row class="collapse">
<columns no-expander>
<a href="#" target="_blank"><img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=HALF-WIDTH&amp;w=266&amp;h=178" alt=""></a>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<h3 class="text-center">Product / Boat Name</h3>
<h3 class="text-center">£199,000</h3>
<p class="text-center capitalise margin-bottom-small">Location, Country</p>
<p class="text-center">Proin venenatis risus in eros efficitur, sit amet viverra orci vulputate. Mauris posuere felis dolor.</p>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<button href="http://www.theyachtmarket.com/" class="radius expand" target="_blank"><strong>Enquire now</strong></button>
</columns>
</row>
</columns>
<columns small="12" large="6">
<row class="collapse">
<columns no-expander>
<a href="#" target="_blank"><img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=HALF-WIDTH&amp;w=266&amp;h=178" alt=""></a>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<h3 class="text-center">Product / Boat Name</h3>
<h3 class="text-center">£199,000</h3>
<p class="text-center capitalise margin-bottom-small">Location, Country</p>
<p class="text-center">Proin venenatis risus in eros efficitur, sit amet viverra orci vulputate. Mauris posuere felis dolor.</p>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<button href="http://www.theyachtmarket.com/" class="radius expand" target="_blank"><strong>Enquire now</strong></button>
</columns>
</row>
</columns>
</row>
 
The interesting thing is that when I send a test to my own mobile to view in the Gmail app, it displays perfectly (but that's on Android 6.0). Unfortunately I don't have an Android 4.4 device on which to test directly.
So, my main question is this: is nesting not possible with Foundation For Emails on the Gmail app (Android 4.4), or is Litmus falsely displaying a broken layout? Because if it's the latter, I'll forward this to the Litmus engineers.
Below are the screenshots from Litmus for the app, and then how it should be laid out based upon the desktop version (and yep, I know that the Gmail app doesn't support media queries - thus me comparing against the desktop version as this is the one it should match).

 

Ant James commented on Bryan's post almost 3 years

Evan's method does indeed seem to have remedied the issue. I'll be rolling this out across all of our templates now!

Ant James commented on Bryan's post almost 3 years

Interesting. I did already have something very similar in a media query but perhaps the range wasn't wide enough. I'll give that a test.

Ant James commented on Bryan's post almost 3 years

Just to add a +1, as it'd be very useful to pull together a bulletproof solution to this issue. At present we've just had to accept that in some cases iOS wrestles control.

Ant James commented on Corey Schaaf's post almost 3 years

Thanks for replying so quickly. That's helpful to hear your case as I've not been able to do a split test here. Our newsletters feature quite a few products so are ticking over 102KB... In the short-term I'll have a think on what can be done to reduce bulk.
If there's anything that can be done within the FFE framework itself to help us users then I eagerly await it!

Ant James commented on Corey Schaaf's post almost 3 years

Corey, how did the results of the split test look?

Ant James commented on Nathan Parikh's post about 3 years

Corey,
Of course... That's the missing piece of the puzzle - and so simple that I'm amazed I didn't realise!
Yep, I've already changed the folder path for the CSS to use {{root}} so we're good to go here. Many thanks.

Ant James commented on Nathan Parikh's post about 3 years

Personally I've been storing my templates in a folder each within the 'pages' directory (but keeping them named index.html). 
I.e.
/pages
/newsletter
index.html
/services
index.html
/etc.
index.html
 
Then when I need to work on a specific mailer, I copy the relevant index.html template file into the root of /pages so that it's accessible via localhost:3000 (and works with BrowserSync).
If anybody has a better workflow than this I'd love to hear about it!

Ant James commented on Corey Schaaf's post about 3 years

After editing a portion of our template yesterday I was horrified to see what Yahoo had done to it! Rolled back the changes but then realised that it must be on Yahoo's side. I too had the issue with 'width' being changed to 'min-width'. Yahoo Mail in Internet Explorer seemed the worst culprit.
Though I independently realised that I could set the .container width with a Yahoo media query it didn't fully fix the layout. 
I then came back to examine it this morning (GMT timezone) and yesterday's test looks perfect again in Yahoo Mail across all browsers. Guessing they must have rolled out a hot-fix in the last 12 hours or so?

Posts Followed



  • 7
    Replies
  • iOS blue links styles

    By Bryan

    emailiosblue linkcss

    In my app.css file, I place the following: &nbsp; a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; ... (continued)

    Last Reply by Bryan over 2 years ago



  • 8
    Replies
  • SCSS file for each Page

    By Nathan Parikh

    emailpagescssunique

    Hello! The structure for my Foundation for Emails 2 project follows the default setup. I have multiple .html&nbsp;files in the /pages folder, and my SCSS files in the /scss folder. Each page is going to have some unique styling, so I would like to creat... (continued)

    Last Reply by Ant James about 3 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Jason's post over 2 years

We added a new file to our SASS setup called _custom.scss. Then, in app.scss, added a line as follows 
@import 'custom';
Within that _custom.scss file we write any CSS/SASS that we need to add above and beyond the Foundation For Emails framework. 
You can add the same CSS solution as you were previously using, but to work with the framework it appears you need to put it within a media query. For example:
@media screen and (min-device-width: 1px) {
a[href=tel], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
}
What this does is it ensures that from a screen width of 1px upwards, the CSS fix is applied. It appears that if you don't use the media query, the framework strips this bit of CSS out - which is probably why it's not working for you.

You commented on Ian Daly's post almost 3 years

Hmm, so I think either the Foundation for Emails framework has issues with the Gmail app on Android 4.4, or Litmus' 'Instant Preview' rendering is broken for that same app/Android version.
Here's the Inky markup for a nested two-column section in one of my new templates:
 
<row>
<columns small="12" large="6">
<row class="collapse">
<columns no-expander>
<a href="#" target="_blank"><img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=HALF-WIDTH&amp;w=266&amp;h=178" alt=""></a>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<h3 class="text-center">Product / Boat Name</h3>
<h3 class="text-center">£199,000</h3>
<p class="text-center capitalise margin-bottom-small">Location, Country</p>
<p class="text-center">Proin venenatis risus in eros efficitur, sit amet viverra orci vulputate. Mauris posuere felis dolor.</p>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<button href="http://www.theyachtmarket.com/" class="radius expand" target="_blank"><strong>Enquire now</strong></button>
</columns>
</row>
</columns>
<columns small="12" large="6">
<row class="collapse">
<columns no-expander>
<a href="#" target="_blank"><img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=HALF-WIDTH&amp;w=266&amp;h=178" alt=""></a>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<h3 class="text-center">Product / Boat Name</h3>
<h3 class="text-center">£199,000</h3>
<p class="text-center capitalise margin-bottom-small">Location, Country</p>
<p class="text-center">Proin venenatis risus in eros efficitur, sit amet viverra orci vulputate. Mauris posuere felis dolor.</p>
</columns>
</row>
<row class="collapse">
<columns class="padding-bottom-none">
<button href="http://www.theyachtmarket.com/" class="radius expand" target="_blank"><strong>Enquire now</strong></button>
</columns>
</row>
</columns>
</row>
 
The interesting thing is that when I send a test to my own mobile to view in the Gmail app, it displays perfectly (but that's on Android 6.0). Unfortunately I don't have an Android 4.4 device on which to test directly.
So, my main question is this: is nesting not possible with Foundation For Emails on the Gmail app (Android 4.4), or is Litmus falsely displaying a broken layout? Because if it's the latter, I'll forward this to the Litmus engineers.
Below are the screenshots from Litmus for the app, and then how it should be laid out based upon the desktop version (and yep, I know that the Gmail app doesn't support media queries - thus me comparing against the desktop version as this is the one it should match).

 

You commented on Bryan's post almost 3 years

Evan's method does indeed seem to have remedied the issue. I'll be rolling this out across all of our templates now!

You commented on Bryan's post almost 3 years

Interesting. I did already have something very similar in a media query but perhaps the range wasn't wide enough. I'll give that a test.

You commented on Bryan's post almost 3 years

Just to add a +1, as it'd be very useful to pull together a bulletproof solution to this issue. At present we've just had to accept that in some cases iOS wrestles control.

You commented on Corey Schaaf's post almost 3 years

Thanks for replying so quickly. That's helpful to hear your case as I've not been able to do a split test here. Our newsletters feature quite a few products so are ticking over 102KB... In the short-term I'll have a think on what can be done to reduce bulk.
If there's anything that can be done within the FFE framework itself to help us users then I eagerly await it!

You commented on Corey Schaaf's post almost 3 years

Corey, how did the results of the split test look?

You commented on Nathan Parikh's post about 3 years

Corey,
Of course... That's the missing piece of the puzzle - and so simple that I'm amazed I didn't realise!
Yep, I've already changed the folder path for the CSS to use {{root}} so we're good to go here. Many thanks.

You commented on Nathan Parikh's post about 3 years

Personally I've been storing my templates in a folder each within the 'pages' directory (but keeping them named index.html). 
I.e.
/pages
/newsletter
index.html
/services
index.html
/etc.
index.html
 
Then when I need to work on a specific mailer, I copy the relevant index.html template file into the root of /pages so that it's accessible via localhost:3000 (and works with BrowserSync).
If anybody has a better workflow than this I'd love to hear about it!

You commented on Corey Schaaf's post about 3 years

After editing a portion of our template yesterday I was horrified to see what Yahoo had done to it! Rolled back the changes but then realised that it must be on Yahoo's side. I too had the issue with 'width' being changed to 'min-width'. Yahoo Mail in Internet Explorer seemed the worst culprit.
Though I independently realised that I could set the .container width with a Yahoo media query it didn't fully fix the layout. 
I then came back to examine it this morning (GMT timezone) and yesterday's test looks perfect again in Yahoo Mail across all browsers. Guessing they must have rolled out a hot-fix in the last 12 hours or so?

Posts Followed

Following

  • No Content

Followers

  • No Content