Skip to content

Instantly share code, notes, and snippets.

@kevingessner

kevingessner/gist:9509148

Last active April 27, 2023 15:45
Show Gist options
  • Star 76 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
  • Save kevingessner/9509148 to your computer and use it in GitHub Desktop.
Save kevingessner/9509148 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>
@cogell
Copy link

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