"Responsive Email Template"
Bootstrap 3.3.0 Snippet by keenthemes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
Responsive Email Template by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
-->
<div id="mailsub" class="notification" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 320px;"><tr><td align="center" bgcolor="#eff3f8">
<!--[if gte mso 10]>
<table width="680" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" class="table_width_100" width="100%" style="max-width: 680px; min-width: 300px;">
<tr><td>
<!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;">·</div>
</td></tr>
<!--header -->
<tr><td align="center" bgcolor="#ffffff">
<!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;">·</div>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="left"><!--
Item --><div class="mob_center_bl" style="float: left; display: inline-block; width: 115px;">
<table class="mob_center" width="115" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;">
<tr><td align="left" valign="middle">
<!-- padding --><div style="height: 20px; line-height: 20px; font-size: 10px;">·</div>
<table width="115" border="0" cellspacing="0" cellpadding="0" >
<tr><td align="left" valign="top" class="mob_center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/
body {
padding: 0;
margin: 0;
}
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (max-device-width: 680px), only screen and (max-width: 680px) {
*[class="table_width_100"] {
width: 96% !important;
}
*[class="border-right_mob"] {
border-right: 1px solid #dddddd;
}
*[class="mob_100"] {
width: 100% !important;
}
*[class="mob_center"] {
text-align: center !important;
}
*[class="mob_center_bl"] {
float: none !important;
display: block !important;
margin: 0px auto;
}
.iage_footer a {
text-decoration: none;
color: #929ca8;
}
img.mob_display_none {
width: 0px !important;
height: 0px !important;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

I've tested your code on the Litmus website form mailing testing ( https://litmus.com/pub/67f50ac ) , results speaks for themselfs, sorry :(

Edit : I realised that i've put "red" score for some small display issues, but creating responsive emails is my day to day job, so i'm maybe too perfectionnist :)

Jonathan Walravens () - 9 years ago - Reply 0


Did you convert it to use inline-css before testing it?

Vic () - 9 years ago - Reply 0


wich one is the best practice to convert html-css email template to html with css embebedd?

Mario Alejandro Marley () - 9 years ago - Reply 0


Jonathon - In your opinion, what is the best option for responsive email templates?

Chris McGrane () - 9 years ago - Reply 0