I am trying to make a HTML CSS Email template that can work on all email clients. I manage to get a simple one up. The template will display properly on Gmail, Hotmail but when it comes to Outlook everything is misaligned. I know that Outlook uses Words to render the template. How do I code to come around it. I want to make it responsive as well. I do not know where to start debugging. I am really new to coding responsive email template for email clients. I have tried to inline my CSS but it does not work. I have tried to use litmus to sent out the email, it doesn't work as well. I have put my code in JSFiddle, can Gurus out there please help out. I really need some help.
CODE
https://jsfiddle.net/hansheung/yjk309e4/2/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
}
td {
padding: 0;
}
.header {
background-color: #C2C1C1;
border-bottom: 3px solid #FF8800;
}
p {
Margin:0;
}
.header p {
text-align: center;
padding: 1%;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
}
a {
color: #F1F1F1;
text-decoration: none;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
img {
border: 0;
}
/*--- Start Outer Table Banner Image, Text & Button --*/
.image img {
width: 100%;
max-width: 670px;
height: auto;
}
.main-table {
width: 100%;
max-width: 610px;
margin: 0 auto;
background-color: #FFF;
border-radius: 6px;
}
.one-column .inner-td {
font-size: 16px;
line-height: 20px;
text-align: justify;
}
.inner-td {
padding: 10px;
}
.footer {
width: 100%;
margin: 0 auto;
background-color: #053D66;
padding: 4% 2%;
}
/*--- Media Queries --*/
@media screen and (max-width: 400px) {
.h1 {
font-size: 22px;
}
.two-column .column, .three-column .column {
max-width: 100%!important;
}
.two-column img {
width: 100%!important;
}
}
@media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
}
.section {
width: 50%;
text-align: center;
}
.m1{
margin: 1%;
}
.p1{
padding: 2%;
}
.contact-details{
text-align: left;
}
.text{
font-family: "Helvetica","sans-serif";
padding: 50px 0px !important;
line-height: 150%;
color:#202020;
font-size: 18px;
text-align:inherit
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.image-right{
text-align: right;
padding-right: 2%;
}
</style>
</head>
<body>
<div class="wrapper">
<table class="outer-table">
<tr>
<td class="image">
<img src="http://www.talent-trust.com/documents/News2020.03/covid19-ttc_header.jpg" alt="">
</td>
</tr>
</table><!--End Banner Image-->
<table class="outer-table">
<tr>
<td class="image">
<img src="http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg" alt="">
</td>
</tr>
</table><!--End Banner Image-->
<table class="main-table">
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td class="inner-td">
<p class="text">
As you are aware China has been experiencing an<a href="https://talent-trust.com/documents/News2020.03/en.html"><span style='color:#FF7F30'>Read More</span></a>
</p>
<!-- <p class="button-holder-center">
<a href="" class="btn">Learn More</a>
</p> -->
</td>
</tr>
</table>
</td>
</tr><!--End heading paragraph and button section-->
</table><!--End of main table-->
<table class="footer">
<tbody>
<tr>
<td class="section image-right">
<img width="35%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</td>
<td class="section">
<div class="contact-details">
<p style="margin-bottom: 0;color:#ffffff;font-size: 11pt; padding-left: 5%;">Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p style="margin-top: 0;color:#ffffff;font-size: 9pt;padding-left: 5%">Tel:+604-899-8945</p>
</div>
</td>
</tr>
<tr>
<td class="text-right p1"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a></td>
<td class="text-left p1"><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></td>
</tr>
</tbody>
</table>
</div><!--End Wrapper-->
</body>
</html>
Everything misaligned in Outlook
See Question&Answers more detail:os