Skip to content

Instantly share code, notes, and snippets.

@cossssmin

cossssmin/hybrid-email-2-col.html

Created March 3, 2021 16:45
Show Gist options
  • Save cossssmin/3adc43e15ce187af8f616bc900dd56f1 to your computer and use it in GitHub Desktop.
Save cossssmin/3adc43e15ce187af8f616bc900dd56f1 to your computer and use it in GitHub Desktop.
Download ZIP
Hybrid 2-column responsive/stackable HTML email layout, with media query enhancement
Raw
hybrid-email-2-col.html
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<style>
table {border-collapse: collapse;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
</style>
<![endif]-->
<style>
@media (max-width: 600px) {
.sm-max-w-full {
max-width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased;">
<div role="article" aria-roledescription="email" aria-label="" lang="en">
<div style="font-size: 0; margin-left: auto; margin-right: auto; max-width: 600px; text-align: center; width: 100%;">
<!--[if mso]>
<table align="center" role="presentation" style="width:600px;">
<tr>
<td style="width:50%;padding:10px;" bgcolor="red">
<![endif]-->
<div class="sm-max-w-full" style="background-color: #ef4444; display: inline-block; font-size: 16px; max-width: 300px; text-align: left; width: 100%;">
<div style="padding: 10px;">Column 1 content</div>
</div>
<!--[if mso]>
</td>
<td style="width:50%;padding:10px;" bgcolor="blue">
<![endif]-->
<div class="sm-max-w-full" style="background-color: #000000; display: inline-block; font-size: 16px; max-width: 300px; text-align: left; color: #ffffff; width: 100%;">
<div style="padding: 10px;">Column 2 content</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment