Skip to content

Instantly share code, notes, and snippets.

@WilliamGarrow

WilliamGarrow/responsive_email_basic-poc.html

Last active October 27, 2015 14:49
Show Gist options
  • Save WilliamGarrow/64e7aea6b7820385c97e to your computer and use it in GitHub Desktop.
Save WilliamGarrow/64e7aea6b7820385c97e to your computer and use it in GitHub Desktop.
Download ZIP
HTML - Basic Responsive Email | Single File Basic Proof of Concept
Raw
responsive_email_basic-poc.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Responsive Email | Single File Proof of Concept</title>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<style>
td.mobile {
display: none;
visibility: hidden;
}
@media only screen and (max-width: 480px) {
td.desktop {
display: none;
visibility: none;
}
td.mobile {
display: table-cell;
visibility: visible;
}
}
</style>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<span class="" style="max-width:600px; display:block; color:#bbb; font-family: georgia;">
<table border="0" cellpadding="0" cellspacing="0" width="600" style="table-layout:fixed; overflow:hidden; background-color:#b00; height:300px; color: #eee; font-weight:bold; font-size:20px; line-height:24px; font-family: helvetica, arial, sans-serif;">
<tr>
<td class="desktop" width="600">You're on a Desktop</td>
<td class="mobile" width="0">You're on Mobile</td>
</tr>
</table>
<p style="font-style:italic;">Click and drag page in to see content swap for mobile vs. desktop.<br />TABLE element has table-layout:fixed; overflow:hidden; set class of .mobile to display:none; visibility:hidden; for Outlook App also added for mobile to hide td.desktop class</p>
</span>
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment