Hide-for-large not working in npm run build SAAS-VERSION

Hi , i’m having a problem with div class=“hide-for-large”, when i use “foundation watch” it works like charm, but when i use ‘npm run build’ , the result is not the same, the content of div class=“hide-for-large” never appears in small screens, but with “foundation watch” appears.


npm run build does a production build.
Please provide the exact Foundation Emails version that you use and a reproducible testcase as repository so we can check this.

Hi Daniel, my version is “foundation-emails”: “^2.2.1”, i’ve downloaded the last version a week ago, and yes, when i’m ready to generate the production build, i’ve notice the result is not the same. i will provide the test as soon as i can, thanks for your atention.


Hi Daniel, below the steps to reproduce:

“foundation-emails”: “^2.2.1” saas-version

1- foundation.js new --framework

? What are you building today? An email (Foundation for Emails)
? What’s the project called? (no spaces) test

2- then i run npm run build

3- then i copy the example from the site https://get.foundation/emails/docs/visibility.html

4- then i paste the example code for visibility, INKY or HTML, in the page( src/pages/index.html )

5- result LARGE screen -> render
SMALL screen -> no render

i’ve notice that the framework put a STYLE info on the div with the class hide-for-large

div class=“hide-for-large” style=“display:none!important;font-size:0;line-height:0;max-height:0;mso-hide:all;overflow:hidden;width:0”

and when we resize the screen to make the text inside hide-for-large div to show, the framework never removes display:none!important, and the content never appear.

I ’ m not sure is the correct thing, maybe have to remove all the style tag when screen is for small device

In addition the test was made in firefox and chrome, i even got my tests into the mobile(browser/email client) yet


i downloaded the css version :_( and the example provided in https://get.foundation/emails/docs/visibility.html works like a charm, maybe is something in INKY or SAAS i dont know, unfortunately, i will use the CSS version, i was so excited about the saas version but…


Afaik we fixed this in the repo of foundation-emails.
See https://github.com/foundation/foundation-emails/commit/fdf6b4ee7e800c2cac4f3917003f748e59d85451

You may want to use the latest code from GitHub.
The last release is a bit older: https://github.com/foundation/foundation-emails/releases

I’m the author of the fix mentioned above https://github.com/foundation/foundation-emails/commit/fdf6b4ee7e800c2cac4f3917003f748e59d85451 and I can confirm that on foundation-emails-template, v1.0.0 which brings in foundation-emails v2.2.1 npm run build results in incorrect display:none!important; style applied to .hide-for-large element. Apparently, the correct style that should be applied to .hide-for-large element would be display:none;

Screen Shot 2020-06-29 at 1.57.27

I’ve yet to figure out where the bug is coming from.

The “bug” is that the fix never landed in a release. After 2.2.1 there was no new release (so far).

All unreleased commits: https://github.com/foundation/foundation-emails/compare/v2.2.1...develop

Right. That’s kind of bug no commit can fix. That’s a huge amount of unreleased commits.

@joeworkman what is the current status regarding npm permissions for every member of the maintainer team and can you publish a new release?

If you need some help please let me know and we can take a look at it together.