I'm struggling with creating an email template that renders properly across major email clients. I'm unsure of where to place my styles for the template, as I know that emails typically only support tables and require inline styles.
However, technology is constantly evolving, so there must be a better way to handle styling for email templates. Below is a snippet of my code that I wish to use in my template. I've included styles within the header using style tags, but Gmail seems to be ignoring them. What should I do?
Code Sample:
<div class="wrapper">
<div class="layout">
<div class="column narrow">
<div class="spacing">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="column wide">
<div class="spacing">
<p>Nulla facilisi. Cras tincidunt congue rhoncus.</p>
</div>
</div>
CSS:
body,
.wrapper {
background-color: #add8c7;
}
.layout {
background-color: #ffffff;
margin: 0 auto;
width: 320px;
}
.spacing {
margin: 20px;
}
p {
margin: 20px 0;
}
In addition, media queries can only be added via style tags, but Gmail appears to disregard any style tags included in the HTML template.