Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Responsive emails that really work -- From Etsy's Code As Craft blog: http://codeascraft.com/2014/03/13/responsive-emails-that-really-work
<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>
cogell commented Jun 13, 2014

I'm having trouble implementing the ideas in your blog post so I fell back to simply try this gist. I couldn't get this gist to work either - testing gmail desktop client against gmail app in my iOS device.

I tried adding a doctype and charset but still no dice. What am I missing?

Thanks for your help. Solid blog post btw.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment