Foundation-emails: [Visibility Classes] .hide-for-large class Workarround

[ARTUR3X]

Hi about your issue that you have with the .hide-for-large class perhaps some else have told you . but just incase it might be useful.

I have found out that removing the !important generated in the display:none!important after i run the inline via (np run build) it. and saving that inliner it makes the hide for large work perfectly.

[davehoran]

Wow. I'll have to try this out!

[ARTUR3X]

Great Dave, please let me know how did it work for you!
Thanks

[ganar]

@ARTUR3X this solution worked for me: I was going nuts with the issue! thanks a lot for you help! nonetheless Foundation Email seems to be behind what can be accomplished with the templating system in campaignmonitor.com. I found that the resulting code was a mess, and that inlining made it even worse, because the results were inconsistent between non inlined and inlined code. That was the dealbreaker for us.

[ahubbell]

@ARTUR3X Thank you this got me out of a tight spot!

[sirthxalot]

Hi folks!

It seems that this is still an issue?

I have found out a quick solution to avoid the issue. So what I do is to update the gulpfile gulpfile.babel.js. Adding the following line to the inliner pipe:

    .pipe($.replace, 'display:none!important', 'display:none')

function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: true,
      preserveMediaQueries: true,
      removeLinkTags: false
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')
    .pipe($.replace, 'display:none!important', 'display:none')
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });

  return pipe();
}

I don't like this solution but it is the only one which helps me out with this issue at the moment.

Why not update the _visibility.scss file?

Does somebody know another way to solve this?

Best regards
Alexander

[DanielRuf]

Hi @sirthxalot,

It seems that this is still an issue?

Yes, as you can see the issue is still open.

[elcaptain]

Why not update the _visibility.scss file?

@sirthxalot the weird thing is the !important is already removed: https://github.com/foundation/foundation-emails/blob/develop/scss/components/_visibility.scss#L10 (dev and master branch).
But when i install a clean project via foundation new --framework emails the !important appears again in the /node-modules/foundation-emails/scss/components/_visibility.scss file.

[DanielRuf]

You are probably installing https://github.com/foundation/foundation-emails/tree/v2.2.1 which is the latest released version on npm.

Also see https://github.com/foundation/foundation-emails/issues/997#issuecomment-604285864

I think we can close this issue for now as this will be resolved with the next npm release. For now you can run npm i foundation/foundation-emails to use the latest version using git.