Skip to content

Instantly share code, notes, and snippets.

@asha23

asha23/gist:800284348b744b4e1fb1

Forked from kevingessner/gist:9509148
Last active August 29, 2015 14:25
Show Gist options
  • Save asha23/800284348b744b4e1fb1 to your computer and use it in GitHub Desktop.
Save asha23/800284348b744b4e1fb1 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive emails that really work -- From Etsy's Code As Craft blog: http://codeascraft.com/2014/03/13/responsive-emails-that-really-work
Raw
gistfile1.html
<html>
<head>
<style type="text/css">
table table {
width: 600px !important;
}
table div + div { /* main content */
width: 65%;
float: left;
}
table div + div + div { /* sidebar */
width: 33%;
float: right;
}
table div + div + div + div { /* footer */
width: 100%;
float: none;
clear: both;
}
@media (max-width: 630px) {
table table {
width: 96% !important;
}
table div {
float: none !important;
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; background: #ccc;">
<table cellpadding=0 cellspacing=0 style="width: 100%;"><tr><td style="padding: 12px 2%;">
<table cellpadding=0 cellspacing=0 style="margin: 0 auto; background: #fff; width: 96%;"><tr><td style="padding: 12px 2%;">
<div>
<h1>Header</h1>
</div>
<div>
<h2 style="margin-top: 0;">Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sem dictum, iaculis magna ornare, dignissim elit.</p>
<p>Cras justo mauris, elementum id purus ut, elementum volutpat nibh. Proin quis augue sed dui vulputate bibendum. Sed congue arcu eget porta pellentesque. Integer pretium tristique augue, lacinia ultricies libero malesuada id.</p>
<p>Cras quis est convallis, malesuada neque nec, pellentesque lorem. Maecenas tempor dui id lorem imperdiet, vitae sollicitudin lacus tincidunt. Aliquam nec arcu eu dui tempus dignissim. Mauris consequat metus nec erat elementum egestas. In vitae lacus pretium justo suscipit imperdiet.</p>
</div>
<div>
<h2 style="margin-top: 0;">Sidebar</h2>
<p>Donec tincidunt tincidunt nunc, eget pulvinar risus sodales eu.</p>
</div>
<div style="border-top: solid 1px #ccc;">
<p>Footer</p>
</div>
</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