Responsive Email Template

Developer
Size
4,175 Kb
Views
26,312

How do I make an responsive email template?

Basic responsive email template.. What is a responsive email template? How do you make a responsive email template? This script and codes were developed by Eric Tompkins on 26 August 2022, Friday.

Responsive Email Template Previews

Responsive Email Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Email Template</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Start of preheader -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<!-- Spacing -->	<tr>	<td width="100%" height="20">	</td>	</tr>	<!-- Spacing -->	<tr>	<td width="100%" align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader"> Can't see this Email? View it in your <a href="#" style="text-decoration: none; color: #e20404">Browser </a>	</td>	</tr>	<!-- Spacing -->	<tr>	<td width="100%" height="20">	</td>	</tr>	<!-- Spacing -->	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of preheader -->
<!-- Start of header -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table width="600" bgcolor="#e20404" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td>	<!-- logo -->	<table bgcolor="#282828" width="140" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<tr>	<td width="140" height="50" align="center">	<div class="imgpop">	<a target="_blank" href="#">	<img src="http://i62.tinypic.com/2uf8qo7.jpg" alt="" border="0" width="140" height="50" style="display:block; border:none; outline:none; text-decoration:none;">	</a>	</div>	</td>	</tr>	</tbody>	</table>	<!-- end of logo -->	<!-- start of menu -->	<table bgcolor="#e20404" width="250" height="50" border="0" align="right" valign="middle" cellpadding="0" cellspacing="0" border="0" class="devicewidth">	<tbody>	<tr>	<td height="50" align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="menu">	<a href="#" style="color: #ffffff;text-decoration: none;">Home</a>	&nbsp;&nbsp;&nbsp; <a href="#" style="color: #ffffff;text-decoration: none;">Shop</a>	&nbsp;&nbsp;&nbsp; <a href="#" style="color: #ffffff;text-decoration: none;">Contact</a>	&nbsp;&nbsp;&nbsp;	</td>	</tr>	</tbody>	</table>	<!-- end of menu -->	</td>	</tr>	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of Header -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>	<td>	<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">	<tbody>	<tr>	<td align="center" height="30" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- Start of main-banner -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="banner">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">	<tbody>	<tr>	<!-- start of image -->	<td align="center" st-image="banner-image">	<div class="imgpop">	<a target="_blank" href="#"><img width="600" border="0" height="300" alt="" border="0" style="display:block; border:none; outline:none; text-decoration:none;" src="http://lorempixel.com/600/300/food/" class="banner"></a>	</div>	</td>	</tr>	</tbody>	</table>	<!-- end of image -->	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of main-banner -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>	<td>	<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">	<tbody>	<tr>	<td align="center" height="30" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- Start of Left Image -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td>	<!-- Start of left column -->	<table width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<!-- image -->	<tr>	<td width="280" height="140" align="center" class="devicewidth">	<img src="http://lorempixel.com/280/140/food/" alt="" border="0" width="280" height="140" style="display:block; border:none; outline:none; text-decoration:none;" class="col2img">	</td>	</tr>	<!-- /image -->	</tbody>	</table>	<!-- end of left column -->	<!-- spacing for mobile devices-->	<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">	<tbody>	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	</tbody>	</table>	<!-- end of for mobile devices-->	<!-- start of right column -->	<table width="280" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<tr>	<td>	<table width="280" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<!-- title -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #282828; text-align:left; line-height: 24px;"> Your Heading Goes Here	</td>	</tr>	<!-- end of title -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- /Spacing -->	<!-- content -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:left; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.	</td>	</tr>	<!-- end of content -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- /Spacing -->	<!-- read more -->	<tr>	<td>	<table width="120" height="32" bgcolor="#e20404" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" style="border-radius:3px;" st-button="learnmore">	<tbody>	<tr>	<td height="9" align="center" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	<tr>	<td height="14" align="center" valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight:bold;color: #ffffff; text-align:center; line-height: 14px; ; -webkit-text-size-adjust:none;" st-title="fulltext-btn">	<a style="text-decoration: none;color: #ffffff; text-align:center;" href="#">Learn More</a>	</td>	</tr>	<tr>	<td height="9" align="center" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>	</tr>	<!-- end of read more -->	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	<!-- end of right column -->	</td>	</tr>	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of Left Image -->
<br />
<!-- Start of Left Image 2 -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td>	<!-- Start of left column -->	<table width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<!-- image -->	<tr>	<td width="280" height="140" align="center" class="devicewidth">	<img src="http://lorempixel.com/280/140/food/" alt="" border="0" width="280" height="140" style="display:block; border:none; outline:none; text-decoration:none;" class="col2img">	</td>	</tr>	<!-- /image -->	</tbody>	</table>	<!-- end of left column -->	<!-- spacing for mobile devices-->	<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">	<tbody>	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	</tbody>	</table>	<!-- end of for mobile devices-->	<!-- start of right column -->	<table width="280" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<tr>	<td>	<table width="280" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<!-- title -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #282828; text-align:left; line-height: 24px;"> Your Heading Goes Here	</td>	</tr>	<!-- end of title -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- /Spacing -->	<!-- content -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:left; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.	</td>	</tr>	<!-- end of content -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- /Spacing -->	<!-- read more -->	<tr>	<td>	<table width="120" height="32" bgcolor="#e20404" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" style="border-radius:3px;" st-button="learnmore">	<tbody>	<tr>	<td height="9" align="center" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	<tr>	<td height="14" align="center" valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight:bold;color: #ffffff; text-align:center; line-height: 14px; ; -webkit-text-size-adjust:none;" st-title="fulltext-btn">	<a style="text-decoration: none;color: #ffffff; text-align:center;" href="#">Learn More</a>	</td>	</tr>	<tr>	<td height="9" align="center" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>	</tr>	<!-- end of read more -->	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	<!-- end of right column -->	</td>	</tr>	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of Left Image 2 -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>	<td>	<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">	<tbody>	<tr>	<td align="center" height="30" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- start of Full text -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<!-- Spacing -->	<tr>	<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- Spacing -->	<tr>	<td>	<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">	<tbody>	<!-- Title -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #282828; text-align:center; line-height: 24px;"> Full Width Text block content	</td>	</tr>	<!-- End of Title -->	<!-- spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- End of spacing -->	<!-- content -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;"> 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	</td>	</tr>	<!-- End of content -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- Spacing -->	</tbody>	</table>	</td>	</tr>	<!-- Spacing -->	<tr>	<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- Spacing -->	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of Full Text -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>	<td>	<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">	<tbody>	<tr>	<td align="center" height="30" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- Start of Right Image -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="right-image">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td>	<!-- Start of left column -->	<table width="280" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<!-- image -->	<tr>	<td width="280" height="140" align="center" class="devicewidth">	<img src="http://lorempixel.com/280/140/food/" alt="" border="0" width="280" height="140" style="display:block; border:none; outline:none; text-decoration:none;" class="col2img">	</td>	</tr>	<!-- /image -->	</tbody>	</table>	<!-- end of left column -->	<!-- spacing for mobile devices-->	<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">	<tbody>	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	</tbody>	</table>	<!-- end of for mobile devices-->	<!-- start of right column -->	<table width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<tr>	<td>	<table width="280" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<!-- title -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #282828; text-align:left; line-height: 24px;"> Your Heading Goes Here	</td>	</tr>	<!-- end of title -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- /Spacing -->	<!-- content -->	<tr>	<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:left; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.	</td>	</tr>	<!-- end of content -->	<!-- Spacing -->	<tr>	<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- /Spacing -->	<!-- read more -->	<tr>	<td>	<table width="120" height="32" bgcolor="#e20404" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" style="border-radius:3px;" st-button="learnmore">	<tbody>	<tr>	<td height="9" align="center" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	<tr>	<td height="14" align="center" valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight:bold;color: #ffffff; text-align:center; line-height: 14px; ; -webkit-text-size-adjust:none;" st-title="fulltext-btn">	<a style="text-decoration: none;color: #ffffff; text-align:center;" href="#">Learn More</a>	</td>	</tr>	<tr>	<td height="9" align="center" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>	</tr>	<!-- end of read more -->	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	<!-- end of right column -->	</td>	</tr>	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of Right Image -->
<!-- Start of seperator -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>	<td>	<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">	<tbody>	<tr>	<td align="center" height="30" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of seperator -->
<!-- Start of footer -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer">
<tbody>
<tr>	<td>	<table width="600" bgcolor="#e20404" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<tr>	<td width="100%">	<table bgcolor="#e20404" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<!-- Spacing -->	<tr>	<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- Spacing -->	<tr>	<td>	<!-- Social icons -->	<table width="150" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">	<tbody>	<tr>	<td width="43" height="43" align="center">	<div class="imgpop">	<a target="_blank" href="#">	<img src="http://placehold.it/43x43" alt="" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">	</a>	</div>	</td>	<td align="left" width="20" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	<td width="43" height="43" align="center">	<div class="imgpop">	<a target="_blank" href="#">	<img src="http://placehold.it/43x43" alt="" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">	</a>	</div>	</td>	<td align="left" width="20" style="font-size:1px; line-height:1px;">	&nbsp;	</td>	<td width="43" height="43" align="center">	<div class="imgpop">	<a target="_blank" href="#">	<img src="http://placehold.it/43x43" alt="" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">	</a>	</div>	</td>	</tr>	</tbody>	</table>	<!-- end of Social icons -->	</td>	</tr>	<!-- Spacing -->	<tr>	<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">	&nbsp;	</td>	</tr>	<!-- Spacing -->	</tbody>	</table>	</td>	</tr>	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of footer -->
<!-- Start of Postfooter -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter">
<tbody>
<tr>	<td>	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">	<tbody>	<!-- Spacing -->	<tr>	<td width="100%" height="20">	</td>	</tr>	<!-- Spacing -->	<tr>	<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader"> No longer want to recieve emails? <a href="#" style="text-decoration: none; color: #e20404">Unsubscribe here </a>	</td>	</tr>	<!-- Spacing -->	<tr>	<td width="100%" height="20">	</td>	</tr>	<!-- Spacing -->	</tbody>	</table>	</td>
</tr>
</tbody>
</table>
<!-- End of postfooter -->
</body>
</html>

Responsive Email Template - Script Codes CSS Codes

@charset "utf-8";
/* CSS Document */
/* Client-specific Styles */
div, p, a, li, td {	-webkit-text-size-adjust:none;
}
#outlook a {	padding:0;
} /* Force Outlook to provide a "view in browser" menu link. */
html {	width: 100%;
}
body {	width:100% !important;	-webkit-text-size-adjust:100%;	-ms-text-size-adjust:100%;	margin:0;	padding:0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {	width:100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {	line-height: 100%;
} /* Force Hotmail to display normal line spacing. */
#backgroundTable {	margin:0;	padding:0;	width:100% !important;	line-height: 100% !important;
}
img {	outline:none;	text-decoration:none;	border:none;	-ms-interpolation-mode: bicubic;
}
a img {	border:none;
}
.image_fix {	display:block;
}
p {	margin: 0px 0px !important;
}
table td {	border-collapse: collapse;
}
table {	border-collapse:collapse;	mso-table-lspace:0pt;	mso-table-rspace:0pt;
}
a {	color: #33b9ff;	text-decoration: none;	text-decoration:none!important;
}
/*STYLES*/
table[class=full] {	width: 100%;	clear: both;
}
/*IPAD STYLES*/
@media only screen and (max-width: 640px) { a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #33b9ff; /* or whatever your want */ pointer-events: none; cursor: default;
} .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #33b9ff !important; pointer-events: auto; cursor: default;
} table[class=devicewidth] {
width: 440px!important;
text-align:center!important;
} table[class=devicewidthinner] {
width: 420px!important;
text-align:center!important;
} img[class=banner] {
width: 440px!important;
height:220px!important;
} img[class=col2img] {
width: 440px!important;
height:220px!important;
}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) { a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #33b9ff; /* or whatever your want */ pointer-events: none; cursor: default;
} .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #33b9ff !important; pointer-events: auto; cursor: default;
} table[class=devicewidth] {
width: 280px!important;
text-align:center!important;
} table[class=devicewidthinner] {
width: 260px!important;
text-align:center!important;
} img[class=banner] {
width: 280px!important;
height:140px!important;
} img[class=col2img] {
width: 280px!important;
height:140px!important;
}
}
Responsive Email Template - Script Codes
Responsive Email Template - Script Codes
Home Page Home
Developer Eric Tompkins
Username _codemics
Uploaded August 26, 2022
Rating 4.5
Size 4,175 Kb
Views 26,312
Do you need developer help for Responsive Email Template?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric Tompkins (_codemics) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!