Foundation-emails: Inliner not adding media query CSS to Body tag

Created on 3 May 2016  路  2Comments  路  Source: foundation/foundation-emails

How can we reproduce this bug?

I'm using the SASS version of Foundation for Emails, with the boilerplate 'default.html' left as it was upon install. I have created my own 'index.html' with but only used simple Inky markup.

What did you expect to happen?

When running the npm run build command, it's my understanding that all media query CSS should be moved from 'app.css' to the commented out <style> tag in the <body> of 'index.html' (the full HTML email file that then resides in /dist).

What happened instead?

Neither the default media query CSS from the Ink framework nor any of my own custom media query CSS has been placed with the body of 'index.html'. Therefore the email is not responsive.

What email clients does this happen in?

This isn't an issue with an email client - when running the inliner, it simply seems to ignore the media queries.

If I manually add the CSS to 'index.html' the mailer is fully responsive upon testing. However this is not an adequate solution as each time the inliner process is run, my additions are overwritten.

picture antonydjames

Most helpful comment

Hi Antony,

I have had a similar problem and I have solved it by reseting the css comment body from default.html. Maybe you changed it by error and now it is not similar to:

<body>

  <!-- <style> -->

  <table class="body" data-made-with-foundation>
picture javimayor on 4 May 2016
👍4

All 2 comments

Hi Antony,

I have had a similar problem and I have solved it by reseting the css comment body from default.html. Maybe you changed it by error and now it is not similar to:

<body>

  <!-- <style> -->

  <table class="body" data-made-with-foundation>
javimayor picture javimayor on 4 May 2016
👍4

That does indeed seem to have fixed it - thank you. Such a small thing!

I thought I'd tried resetting the whole file to match the default template but evidently I missed something.

antonydjames picture antonydjames on 4 May 2016
Was this page helpful?
0 / 5 - 0 ratings

Related issues

stevesmename picture stevesmename  路  3Comments
lspoor picture lspoor  路  5Comments
frecklebit picture frecklebit  路  5Comments
rockse picture rockse  路  3Comments
AmeliePoulain92 picture AmeliePoulain92  路  5Comments