title: Sendgrid template CSS is ignored
body: <p>I have used Sendgrid to make the following template:</p>
  <p><a href="https://i.stack.imgur.com/TFQfl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TFQfl.png" alt="enter image description here" /></a></p>
  <p>To send this using my Node server I have created the following module:</p>
  <pre><code>/**
   * Created by root on 6/6/16.
   */
  var path = require('path'),
      emailTemplates = require('email-templates'),
      async = require(&quot;async&quot;),
      mailConfig = require('../config/email.json'),
      templates = require('../config/emailTemplates.json'),
      _ = require('lodash'),
      sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
  var mymailer = {};
  
  
      /**
       * Sends an email to either one or multiple users
       * @param template_id (The id key of the template. Can be found in emailTemplates.json
       * @param to String or Array
       * @param from String
       * @param subject String
       * @param keyReplacer Array of objects for keys to replace in the template
       */
      mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
          var email = new sendgrid.Email();
          var templateKey = templates[template_id];
          if (templateKey) {
              email.setSmtpapiTos(to);
              email.subject = subject;
              email.from = from;
              email.text = text;
              email.html = '';
              email.setFilters({
                  'templates': {
                      'settings': {
                          'enable': 1,
                          'template_id': templateKey
                      }
                  }
              });
              email.smtpapi.header.sub = createSub(keyReplacer);
              sendgrid.send(email);
          }
          else {
              console.log('incorrect key');
          }
      };
      
      function createSub(keyReplacer) {
          var finalObject = {};
          if (keyReplacer) {
              _.forEach(keyReplacer, function (value, key) {
                  var k = ':' + key;
                  finalObject[k] = [value];
              })
          }
          return finalObject;
      }
      
  
  module.exports = mymailer;
  </code></pre>
  <p>However when I receive my email it is stripped from both CSS and images.</p>
  <p>It looks like this:</p>
  <p><a href="https://i.stack.imgur.com/MIV4o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MIV4o.png" alt="enter image description here" /></a></p>
  <p>I guess it's some settings I'm missing but I don't know which. Which ones can I try?</p>
  <p><strong>Template html</strong></p>
  <pre><code>    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; data-dnd=&quot;true&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1&quot; /&gt;
    &lt;!--[if !mso]&gt;&lt;!--&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot; /&gt;
    &lt;!--&lt;![endif]--&gt;
  
    &lt;!--[if (gte mso 9)|(IE)]&gt;&lt;style type=&quot;text/css&quot;&gt;
    table {border-collapse: collapse;}
    table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
    img {-ms-interpolation-mode: bicubic;}
    &lt;/style&gt;
    &lt;![endif]--&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    body {
      color: #000000;
    }
    body a {
      color: #0071cb;
      text-decoration: none;
    }
    p { margin: 0; padding: 0; }
    table[class=&quot;wrapper&quot;] {
      width:100% !important;
      table-layout: fixed;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    img[class=&quot;max-width&quot;] {
      max-width: 100% !important;
    }
    @media screen and (max-width:480px) {
      .preheader .rightColumnContent,
      .footer .rightColumnContent {
          text-align: left !important;
      }
      .preheader .rightColumnContent div,
      .preheader .rightColumnContent span,
      .footer .rightColumnContent div,
      .footer .rightColumnContent span {
        text-align: left !important;
      }
      .preheader .rightColumnContent,
      .preheader .leftColumnContent {
        font-size: 80% !important;
        padding: 5px 0;
      }
      table[class=&quot;wrapper-mobile&quot;] {
        width: 100% !important;
        table-layout: fixed;
      }
      img[class=&quot;max-width&quot;] {
        height: auto !important;
      }
      a[class=&quot;bulletproof-button&quot;] {
        display: block !important;
        width: auto !important;
        font-size: 80%;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      // 2 columns
      #templateColumns{
          width:100% !important;
      }
  
      .templateColumnContainer{
          display:block !important;
          width:100% !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
      }
    }
    &lt;/style&gt;
    &lt;style&gt;
    body, p, div { font-family: arial,sans-serif; }
  &lt;/style&gt;
    &lt;style&gt;
    body, p, div { font-size: 14px; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body yahoofix=&quot;true&quot; style=&quot;min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'&gt;
    &lt;center class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;webkit&quot;&gt;
        &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot; class=&quot;wrapper&quot; bgcolor=&quot;#0071CB&quot;&gt;
        &lt;tr&gt;&lt;td valign=&quot;top&quot; bgcolor=&quot;#0071CB&quot; width=&quot;100%&quot;&gt;
        &lt;!--[if (gte mso 9)|(IE)]&gt;
        &lt;table width=&quot;600&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
          &lt;tr&gt;
            &lt;td&gt;
            &lt;![endif]--&gt;
              &lt;table width=&quot;100%&quot; role=&quot;content-container&quot; class=&quot;outer&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                &lt;tr&gt;
                  &lt;td width=&quot;100%&quot;&gt;&lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                    &lt;tr&gt;
                      &lt;td&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                        &lt;table width=&quot;600&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;![endif]--&gt;
                                &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;width: 100%; max-width:600px;&quot; align=&quot;center&quot;&gt;
                                  &lt;tr&gt;&lt;td role=&quot;modules-container&quot; style=&quot;padding: 0px 0px 0px 0px; color: #000000; text-align: left;&quot; bgcolor=&quot;#FFFFFF&quot; width=&quot;100%&quot; align=&quot;left&quot;&gt;
                                    &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;100%&quot; style=&quot;display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;&quot; class=&quot;module preheader preheader-hide&quot; role=&quot;module&quot; data-type=&quot;preheader&quot;&gt;
    &lt;tr&gt;&lt;td role=&quot;module-content&quot;&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class=&quot;module&quot; role=&quot;module&quot; data-type=&quot;wysiwyg&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; style=&quot;table-layout: fixed;&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'&gt;
  &lt;tr&gt;&lt;td role=&quot;module-content&quot; style=&quot;padding: 0px 0px 0px 0px;&quot; bgcolor=&quot;#ffffff&quot;&gt;&lt;div&gt;&amp;lt;%body%&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;100%&quot; class=&quot;module wrapper&quot; role=&quot;module&quot; data-type=&quot;imagetext&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
          &lt;tr role=&quot;module-content&quot;&gt;
            &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;50%&quot; height=&quot;100%&quot; class=&quot;templateColumnContainer&quot;  bgcolor=&quot;#ffffff&quot; &gt;
              &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;
                &lt;tr&gt;
                  &lt;td class=&quot;leftColumnContent&quot; role=&quot;column-one&quot; height=&quot;100%&quot; style=&quot;height:100%;width:50%; padding: 0px 0px 0px 0px;&quot;&gt;&lt;table role=&quot;module&quot; data-type=&quot;image&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; style=&quot;table-layout: fixed;&quot; class=&quot;wrapper&quot; data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'&gt;
  &lt;tr&gt;
    &lt;td style=&quot;font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;&quot; valign=&quot;top&quot; align=&quot;&quot; role=&quot;module-content&quot;&gt;
  
    &lt;img class=&quot;max-width&quot;  width=&quot;250&quot;   height=&quot;333&quot;  src=&quot;https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg&quot; alt=&quot;&quot; border=&quot;0&quot; style=&quot;display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; &quot; /&gt;
  
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/td&gt;
            &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;50%&quot; height=&quot;100%&quot; class=&quot;templateColumnContainer&quot;  bgcolor=&quot;#ffffff&quot; &gt;
              &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;
                &lt;tr&gt;
                  &lt;td class=&quot;rightColumnContent&quot; role=&quot;column-two&quot; height=&quot;100%&quot; style=&quot;height:100%;width:50%; padding: 0px 0px 0px 0px;&quot;&gt;&lt;table class=&quot;module&quot; role=&quot;module&quot; data-type=&quot;text&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; height=&quot;100%&quot; width=&quot;100%&quot; style=&quot;table-layout: fixed;&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'&gt;
  &lt;tr&gt;
    &lt;td role=&quot;module-content&quot;  valign=&quot;top&quot; height=&quot;100%&quot; style=&quot;padding: 0px 0px 0px 0px;&quot; bgcolor=&quot;#ffffff&quot;&gt;&lt;div&gt;Hello world&lt;/div&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;100%&quot; role=&quot;module&quot; data-type=&quot;columns&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'&gt;
    &lt;tr&gt;&lt;td style=&quot;padding: 0px 0px 0px 0px;&quot; bgcolor=&quot;&quot;&gt;
      &lt;table class=&quot;columns--container-table&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;100%&quot;&gt;
        &lt;tr role=&quot;module-content&quot;&gt;
          &lt;td style=&quot;padding: 0px 0px 0px 0px&quot; role=&quot;column-0&quot; align=&quot;center&quot; valign=&quot;top&quot; width=&quot;50%&quot; height=&quot;100%&quot; class=&quot;templateColumnContainer column-drop-area empty&quot;&gt;
    
  &lt;/td&gt;&lt;td style=&quot;padding: 0px 0px 0px 0px&quot; role=&quot;column-1&quot; align=&quot;center&quot; valign=&quot;top&quot; width=&quot;50%&quot; height=&quot;100%&quot; class=&quot;templateColumnContainer column-drop-area &quot;&gt;
    &lt;table class=&quot;module&quot; role=&quot;module&quot; data-type=&quot;button&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; style=&quot;table-layout: fixed;&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'&gt;
  &lt;tr&gt;
    &lt;td style=&quot;padding: 0px 0px 0px 0px;&quot; align=&quot;center&quot; bgcolor=&quot;#ffffff&quot;&gt;
      &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;wrapper-mobile&quot;&gt;
        &lt;tr&gt;
          &lt;td align=&quot;center&quot; style=&quot;-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;&quot; bgcolor=&quot;#1188e6&quot;&gt;
            &lt;a href=&quot;&quot; class=&quot;bulletproof-button&quot; target=&quot;_blank&quot; style=&quot;height: px; width: px; font-size: 16px; line-height: px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 12px 18px 12px 18px; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #1288e5; display: inline-block;&quot;&gt;Your Bulletproof Button&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;100%&quot; class=&quot;module footer&quot; role=&quot;module&quot; data-type=&quot;footer&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'&gt;
    &lt;tr&gt;&lt;td style=&quot;padding: 10px 5px 10px 5px;&quot; bgcolor=&quot;#ffffff&quot;&gt;
      &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;100%&quot;&gt;
        &lt;tr role=&quot;module-content&quot;&gt;
          
          &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;100%&quot; height=&quot;100%&quot; class=&quot;templateColumnContainer&quot;&gt;
            &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;
              &lt;tr&gt;
                &lt;td class=&quot;leftColumnContent&quot; role=&quot;column-one&quot; height=&quot;100%&quot; style=&quot;height:100%;&quot;&gt;&lt;table class=&quot;module&quot; role=&quot;module&quot; data-type=&quot;text&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;  width=&quot;100%&quot; style=&quot;table-layout: fixed;&quot; data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'&gt;
  &lt;tr&gt;
    &lt;td role=&quot;module-content&quot;  valign=&quot;top&quot; height=&quot;100%&quot; style=&quot;padding: 0px 0px 0px 0px;&quot; bgcolor=&quot;#ffffff&quot;&gt;&lt;div style=&quot;font-size:12px;line-height:150%;margin:0;text-align:center;&quot;&gt;
    This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
  &lt;/div&gt;
  &lt;div style=&quot;font-size:12px;line-height:150%;margin:0;text-align:center;&quot;&gt;
    To unsubscribe click: &lt;a href=&quot;[Unsubscribe]&quot;&gt;here&lt;/a&gt;
  &lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;
          
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
                                  &lt;/tr&gt;&lt;/td&gt;
                                &lt;/table&gt;
                              &lt;!--[if (gte mso 9)|(IE)]&gt;
                            &lt;/td&gt;
                          &lt;/td&gt;
                        &lt;/table&gt;
                      &lt;![endif]--&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;!--[if (gte mso 9)|(IE)]&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;![endif]--&gt;
        &lt;/tr&gt;&lt;/td&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>