search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Gmail does not display any template style #252

Closed funcion closed 8 years ago

funcion commented 8 years ago

I am sending an email with Codeigniter 3 configurations'm doing for the mailings in HTML format, here the configuration code.

Mail settings:

$config = Array (
    'priority'  => 1,
    'protocol'  => 'mail', 
    'smtp_host' => 'ssl://smtp.gmail.com', 
    'smtp_port' => 465,
    'smtp_user' => 'email@gmail.com',
    'smtp_pass' => 'password',
    'mailtype'  => 'html', 
    'charset'   => 'utf-8', // iso-8859-1
    'wordwrap'  => TRUE, 
    'newline'   => "\r\n"
);

Controller:

public function email() 
{
    $this->load->library('email');
    $this->email->from('email@email.com', 'Names');
    $this->email->to('email@email.com');
    $this->email->subject('Email Test');

    $data['nombre'] = 'Example';
    $body = $this->load->view('email/test.php',$data,TRUE);
    //$this->email->attach("/assets/images/logo.png", "inline");
    $this->email->message($body);
    if ($this->email->send()) {
     return true;
    } else {
     return false;
    }
    $this->email->clear(TRUE);
}

View - Default email template Foundation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style>
#outlook a {
    padding: 0;
}
body {
    width: 100%!important;
    min-width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}
.ExternalClass {
    width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
#backgroundTable {
    margin: 0;
    padding: 0;
    width: 100%!important;
    line-height: 100%!important;
}
img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
    width: auto;
    max-width: 100%;
    float: left;
    clear: both;
    display: block;
}
center {
    width: 100%;
    min-width: 580px;
}
a img {
    border: none;
}
p {
    margin: 0 0 0 10px;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    border-collapse: collapse!important;
}
table, tr, td {
    padding: 0;
    vertical-align: top;
    text-align: left;
}
hr {
    color: #d9d9d9;
    background-color: #d9d9d9;
    height: 1px;
    border: none;
}
table.body {
    height: 100%;
    width: 100%;
}
table.container {
    width: 580px;
    margin: 0 auto;
    text-align: inherit;
}
table.row {
    padding: 0px;
    width: 100%;
    position: relative;
}
table.container table.row {
    display: block;
}
td.wrapper {
    padding: 10px 20px 0px 0px;
    position: relative;
}
table.columns, table.column {
    margin: 0 auto;
}
table.columns td, table.column td {
    padding: 0px 0px 10px;
}
table.columns td.sub-columns, table.column td.sub-columns, table.columns td.sub-column, table.column td.sub-column {
    padding-right: 10px;
}
td.sub-column, td.sub-columns {
    min-width: 0px;
}
table.row td.last, table.container td.last {
    padding-right: 0px;
}
table.one {
    width: 30px;
}
table.two {
    width: 80px;
}
table.three {
    width: 130px;
}
table.four {
    width: 180px;
}
table.five {
    width: 230px;
}
table.six {
    width: 280px;
}
table.seven {
    width: 330px;
}
table.eight {
    width: 380px;
}
table.nine {
    width: 430px;
}
table.ten {
    width: 480px;
}
table.eleven {
    width: 530px;
}
table.twelve {
    width: 580px;
}
table.one center {
    min-width: 30px;
}
table.two center {
    min-width: 80px;
}
table.three center {
    min-width: 130px;
}
table.four center {
    min-width: 180px;
}
table.five center {
    min-width: 230px;
}
table.six center {
    min-width: 280px;
}
table.seven center {
    min-width: 330px;
}
table.eight center {
    min-width: 380px;
}
table.nine center {
    min-width: 430px;
}
table.ten center {
    min-width: 480px;
}
table.eleven center {
    min-width: 530px;
}
table.twelve center {
    min-width: 580px;
}
table.one .panel center {
    min-width: 10px;
}
table.two .panel center {
    min-width: 60px;
}
table.three .panel center {
    min-width: 110px;
}
table.four .panel center {
    min-width: 160px;
}
table.five .panel center {
    min-width: 210px;
}
table.six .panel center {
    min-width: 260px;
}
table.seven .panel center {
    min-width: 310px;
}
table.eight .panel center {
    min-width: 360px;
}
table.nine .panel center {
    min-width: 410px;
}
table.ten .panel center {
    min-width: 460px;
}
table.eleven .panel center {
    min-width: 510px;
}
table.twelve .panel center {
    min-width: 560px;
}
.body .columns td.one, .body .column td.one {
    width: 8.333333%;
}
.body .columns td.two, .body .column td.two {
    width: 16.666666%;
}
.body .columns td.three, .body .column td.three {
    width: 25%;
}
.body .columns td.four, .body .column td.four {
    width: 33.333333%;
}
.body .columns td.five, .body .column td.five {
    width: 41.666666%;
}
.body .columns td.six, .body .column td.six {
    width: 50%;
}
.body .columns td.seven, .body .column td.seven {
    width: 58.333333%;
}
.body .columns td.eight, .body .column td.eight {
    width: 66.666666%;
}
.body .columns td.nine, .body .column td.nine {
    width: 75%;
}
.body .columns td.ten, .body .column td.ten {
    width: 83.333333%;
}
.body .columns td.eleven, .body .column td.eleven {
    width: 91.666666%;
}
.body .columns td.twelve, .body .column td.twelve {
    width: 100%;
}
td.offset-by-one {
    padding-left: 50px;
}
td.offset-by-two {
    padding-left: 100px;
}
td.offset-by-three {
    padding-left: 150px;
}
td.offset-by-four {
    padding-left: 200px;
}
td.offset-by-five {
    padding-left: 250px;
}
td.offset-by-six {
    padding-left: 300px;
}
td.offset-by-seven {
    padding-left: 350px;
}
td.offset-by-eight {
    padding-left: 400px;
}
td.offset-by-nine {
    padding-left: 450px;
}
td.offset-by-ten {
    padding-left: 500px;
}
td.offset-by-eleven {
    padding-left: 550px;
}
td.expander {
    visibility: hidden;
    width: 0px;
    padding: 0!important;
}
table.columns .text-pad, table.column .text-pad {
    padding-left: 10px;
    padding-right: 10px;
}
table.columns .left-text-pad, table.columns .text-pad-left, table.column .left-text-pad, table.column .text-pad-left {
    padding-left: 10px;
}
table.columns .right-text-pad, table.columns .text-pad-right, table.column .right-text-pad, table.column .text-pad-right {
    padding-right: 10px;
}
.block-grid {
    width: 100%;
    max-width: 580px;
}
.block-grid td {
    display: inline-block;
    padding: 10px;
}
.two-up td {
    width: 270px;
}
.three-up td {
    width: 173px;
}
.four-up td {
    width: 125px;
}
.five-up td {
    width: 96px;
}
.six-up td {
    width: 76px;
}
.seven-up td {
    width: 62px;
}
.eight-up td {
    width: 52px;
}
table.center, td.center {
    text-align: center;
}
h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
    text-align: center;
}
span.center {
    display: block;
    width: 100%;
    text-align: center;
}
img.center {
    margin: 0 auto;
    float: none;
}
.show-for-small, .hide-for-desktop {
    display: none;
}
body, table.body, h1, h2, h3, h4, h5, h6, p, td {
    color: #222222;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 {
    word-break: normal;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 36px;
}
h3 {
    font-size: 32px;
}
h4 {
    font-size: 28px;
}
h5 {
    font-size: 24px;
}
h6 {
    font-size: 20px;
}
body, table.body, p, td {
    font-size: 14px;
    line-height: 19px;
}
p.lead, p.lede, p.leed {
    font-size: 18px;
    line-height: 21px;
}
p {
    margin-bottom: 10px;
}
small {
    font-size: 10px;
}
a {
    color: #2ba6cb;
    text-decoration: none;
}
a:hover {
    color: #2795b6!important;
}
a:active {
    color: #2795b6!important;
}
a:visited {
    color: #2ba6cb!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #2ba6cb;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: #2ba6cb!important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #2ba6cb!important;
}
.panel {
    background: #f2f2f2;
    border: 1px solid #d9d9d9;
    padding: 10px!important;
}
.sub-grid table {
    width: 100%;
}
.sub-grid td.sub-columns {
    padding-bottom: 0;
}
table.button, table.tiny-button, table.small-button, table.medium-button, table.large-button {
    width: 100%;
    overflow: hidden;
}
table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td {
    display: block;
    width: auto!important;
    text-align: center;
    background: #2ba6cb;
    border: 1px solid #2284a1;
    color: #ffffff;
    padding: 8px 0;
}
table.tiny-button td {
    padding: 5px 0 4px;
}
table.small-button td {
    padding: 8px 0 7px;
}
table.medium-button td {
    padding: 12px 0 10px;
}
table.large-button td {
    padding: 21px 0 18px;
}
table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a {
    font-weight: bold;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-size: 16px;
}
table.tiny-button td a {
    font-size: 12px;
    font-weight: normal;
}
table.small-button td a {
    font-size: 16px;
}
table.medium-button td a {
    font-size: 20px;
}
table.large-button td a {
    font-size: 24px;
}
table.button:hover td, table.button:visited td, table.button:active td {
    background: #2795b6!important;
}
table.button:hover td a, table.button:visited td a, table.button:active td a {
    color: #fff!important;
}
table.button:hover td, table.tiny-button:hover td, table.small-button:hover td, table.medium-button:hover td, table.large-button:hover td {
    background: #2795b6!important;
}
table.button:hover td a, table.button:active td a, table.button td a:visited, table.tiny-button:hover td a, table.tiny-button:active td a, table.tiny-button td a:visited, table.small-button:hover td a, table.small-button:active td a, table.small-button td a:visited, table.medium-button:hover td a, table.medium-button:active td a, table.medium-button td a:visited, table.large-button:hover td a, table.large-button:active td a, table.large-button td a:visited {
    color: #ffffff!important;
}
table.secondary td {
    background: #e9e9e9;
    border-color: #d0d0d0;
    color: #555;
}
table.secondary td a {
    color: #555;
}
table.secondary:hover td {
    background: #d0d0d0!important;
    color: #555;
}
table.secondary:hover td a, table.secondary td a:visited, table.secondary:active td a {
    color: #555!important;
}
table.success td {
    background: #5da423;
    border-color: #457a1a;
}
table.success:hover td {
    background: #457a1a!important;
}
table.alert td {
    background: #c60f13;
    border-color: #970b0e;
}
table.alert:hover td {
    background: #970b0e!important;
}
table.radius td {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
table.round td {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}
body.outlook p {
    display: inline!important;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
    width: auto!important;
    height: auto!important;
}
table[class="body"] center {
    min-width: 0!important;
}
table[class="body"] .container {
    width: 95%!important;
}
table[class="body"] .row {
    width: 100%!important;
    display: block!important;
}
table[class="body"] .wrapper {
    display: block!important;
    padding-right: 0!important;
}
table[class="body"] .columns, table[class="body"] .column {
    table-layout: fixed!important;
    float: none!important;
    width: 100%!important;
    padding-right: 0px!important;
    padding-left: 0px!important;
    display: block!important;
}
table[class="body"] .wrapper.first .columns, table[class="body"] .wrapper.first .column {
    display: table!important;
}
table[class="body"] table.columns td, table[class="body"] table.column td {
    width: 100%!important;
}
table[class="body"] .columns td.one, table[class="body"] .column td.one {
    width: 8.333333%!important;
}
table[class="body"] .columns td.two, table[class="body"] .column td.two {
    width: 16.666666%!important;
}
table[class="body"] .columns td.three, table[class="body"] .column td.three {
    width: 25%!important;
}
table[class="body"] .columns td.four, table[class="body"] .column td.four {
    width: 33.333333%!important;
}
table[class="body"] .columns td.five, table[class="body"] .column td.five {
    width: 41.666666%!important;
}
table[class="body"] .columns td.six, table[class="body"] .column td.six {
    width: 50%!important;
}
table[class="body"] .columns td.seven, table[class="body"] .column td.seven {
    width: 58.333333%!important;
}
table[class="body"] .columns td.eight, table[class="body"] .column td.eight {
    width: 66.666666%!important;
}
table[class="body"] .columns td.nine, table[class="body"] .column td.nine {
    width: 75%!important;
}
table[class="body"] .columns td.ten, table[class="body"] .column td.ten {
    width: 83.333333%!important;
}
table[class="body"] .columns td.eleven, table[class="body"] .column td.eleven {
    width: 91.666666%!important;
}
table[class="body"] .columns td.twelve, table[class="body"] .column td.twelve {
    width: 100%!important;
}
table[class="body"] td.offset-by-one, table[class="body"] td.offset-by-two, table[class="body"] td.offset-by-three, table[class="body"] td.offset-by-four, table[class="body"] td.offset-by-five, table[class="body"] td.offset-by-six, table[class="body"] td.offset-by-seven, table[class="body"] td.offset-by-eight, table[class="body"] td.offset-by-nine, table[class="body"] td.offset-by-ten, table[class="body"] td.offset-by-eleven {
    padding-left: 0!important;
}
table[class="body"] table.columns td.expander {
    width: 1px!important;
}
table[class="body"] .right-text-pad, table[class="body"] .text-pad-right {
    padding-left: 10px!important;
}
table[class="body"] .left-text-pad, table[class="body"] .text-pad-left {
    padding-right: 10px!important;
}
table[class="body"] .hide-for-small, table[class="body"] .show-for-desktop {
    display: none!important;
}
table[class="body"] .show-for-small, table[class="body"] .hide-for-desktop {
    display: inherit!important;
}
}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}@media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}@media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
</head>
<body>
<script type="text/javascript">ANCHORFREE_VERSION="413161526"</script><script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(/^(.*,)?(11C)(,.*)?$/g.exec(_AF2$.CT)!=null){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/par.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}document.write("<style type='text/css' title='AFc_css"+_AF2$.RN+"' >.AFc_body"+_AF2$.RN+"{} .AFc_all"+_AF2$.RN+",a.AFc_all"+_AF2$.RN+":hover,a.AFc_all"+_AF2$.RN+":visited{outline:none;background:transparent;border:none;margin:0;padding:0;top:0;left:0;text-decoration:none;overflow:hidden;display:block;z-index:666999;}</style>");})();</script>
<style type='text/css'>
.AFhss_dpnone{display:none;width:0;height:0}
</style>
<img src="about:blank"id="AFhss_trk"name="AFhss_trk"style="display:none"/>
<div id="AFhss_dfs"class="AFhss_dpnone">
  <div id="AFhss_adrp0"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp1"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp2"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp3"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp4"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp5"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp6"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp7"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp8"class="AFhss_dpnone"></div>
  <div id="AFhss_adrp9"class="AFhss_dpnone"></div>
</div>
<script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(_AF2$.TOP==1){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/41.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}})()</script>
<table class="body">
  <tr>
    <td class="center" align="center" valign="top"><center>
        <table class="row header">
          <tr>
            <td class="center" align="center"><center>
                <table class="container">
                  <tr>
                    <td class="wrapper last"><table class="twelve columns">
                        <tr>
                          <td class="six sub-columns"><img src="http://placehold.it/200x50"></td>
                          <td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;"><span class="template-label">HERO</span></td>
                          <td class="expander"></td>
                        </tr>
                      </table></td>
                  </tr>
                </table>
              </center></td>
          </tr>
        </table>
        <br>
        <table class="container">
          <tr>
            <td><table class="row">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td><h1>Hi, Elijah Baily</h1>
                          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                          <img width="580" height="300" src="http://placehold.it/580x300"></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row callout">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td class="panel"><p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td><h3>Title Ipsum <small>This is a note.</small></h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row">
                <tr>
                  <td class="wrapper last"><table class="three columns">
                      <tr>
                        <td><table class="button">
                            <tr>
                              <td><a href="#">Click Me!</a></td>
                            </tr>
                          </table></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row footer">
                <tr>
                  <td class="wrapper"><table class="six columns">
                      <tr>
                        <td class="left-text-pad"><h5>Connect With Us:</h5>
                          <table class="tiny-button facebook">
                            <tr>
                              <td><a href="#">Facebook</a></td>
                            </tr>
                          </table>
                          <br>
                          <table class="tiny-button twitter">
                            <tr>
                              <td><a href="#">Twitter</a></td>
                            </tr>
                          </table>
                          <br>
                          <table class="tiny-button google-plus">
                            <tr>
                              <td><a href="#">Google +</a></td>
                            </tr>
                          </table></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                  <td class="wrapper last"><table class="six columns">
                      <tr>
                        <td class="last right-text-pad"><h5>Contact Info:</h5>
                          <p>Phone: 408.341.0600</p>
                          <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              <table class="row">
                <tr>
                  <td class="wrapper last"><table class="twelve columns">
                      <tr>
                        <td align="center"><center>
                            <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
                          </center></td>
                        <td class="expander"></td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
        </table>
      </center></td>
  </tr>
</table>
</body>
</html>
```)

_Would greatly appreciate your support, thank you very much._
tazzydemon commented 8 years ago

You have not inlined the styles. Easy to forget but it must be done. This is sometimes call Emogrifier and that might be used by codeigniter

funcion commented 8 years ago

Hello! I have a question, what you're wanting me to say is that styles must be on a single line?

Please can you give me an example of Emogrifier, it would be very helpful for those who do not know that.

Note: _It is possible to do this without applying _Emogrifier?

tazzydemon commented 8 years ago

There are various inlining tools available. Foundation for Emails 2 has one baked into its build process. There are convenient online ones you can try. Just paste your code into them. http://templates.mailchimp.com/resources/inline-css/
or http://foundation.zurb.com/emails/inliner.html

When you have run it you will see that the styles at the top are distributed through the code as inline style tags all over the template. Most email clients require this, sad though it is.

funcion commented 8 years ago

Excellent, thank you very much, was a big help your support, have a great day, very grateful for your help. Blessings!

tazzydemon commented 8 years ago

Glad to be of service - from down under in NZ!!

rafibomb commented 8 years ago

@tazzydemon Thanks for assist! Gmail strips all styles in the head - an inliner will therefor solve this problem.

funcion commented 8 years ago

@rafibomb - Thank you very much for your contribution, But, What it means is that the Emogrifier solves the whole problem? What happens to Media Queries, as we make Gmail respect the media queries in the < head >, or we have to put after the < body >?