Skip to content

Instantly share code, notes, and snippets.

@matherton

matherton/blamk-responsive-email-template

Created January 30, 2015 17:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matherton/b5991b92745f163b8a5c to your computer and use it in GitHub Desktop.
Save matherton/b5991b92745f163b8a5c to your computer and use it in GitHub Desktop.
Download ZIP
A blank 1 column full width responsive email template
Raw
blamk-responsive-email-template
<!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, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Email</title>
<style>
/*desktop css*/
.table-body {
width: 100% !important;
line-height: 100% !important;
margin: 0; padding: 0;
}
.g-spacer {
line-height: 1px;
img {
max-height: 1px;
min-height: 1px;
width: 560px;
min-width: 560px;
}
}
/*responsive css*/
@media only screen and (max-width: 480px) {
table[class="content-table"] {
width: 320px !important;
}
*[class="is-desktop"] {
display: none;
max-height: 0px;
overflow: hidden;
}
}
</style>
</head>
<body>
<table bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0" border="0" class="table-body">
<tr>
<td bgcolor="#ffffff">
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="content-table">
<tr>
<td>
<div class="is-desktop">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="red" align="center" valign="top" height="1px; min-width: 560px;" class="g-spacer">
<img src="images/blank.gif" alt="" width="600" height="1" class="image-fix" >
</td>
</tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
content
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment