Skip to content

Instantly share code, notes, and snippets.

@rafibomb

rafibomb/2-column-stacking

Created November 15, 2014 01:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rafibomb/e2cf0ddfe0078366e1c5 to your computer and use it in GitHub Desktop.
Save rafibomb/e2cf0ddfe0078366e1c5 to your computer and use it in GitHub Desktop.
Download ZIP
2 Column Stacking Inline Links on Mobile - Ink Responsive HTML Email
Raw
2-column-stacking
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="ink.css"> <!-- For testing only -->
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
<style type="text/css">
/* Ink styles go here in production */
</style>
<style type="text/css">
@media only screen and (max-width: 600px) {
table[class=pattern] .main_nav {
display: table-footer-group;
}
table[class=pattern] .main_nav td td {
display: inline-block;
width: 50%;
border: 1px solid #999;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class=pattern] .main_img {
display: table-header-group;
}
table[class=pattern] .main_img td {
padding-top: 16px;
}
}
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<br>
<table class="container">
<tr>
<td>
<!-- content start -->
<table class="row">
<tr>
<td class="wrapper last">
<table cellpadding="0" cellspacing="0" class="pattern">
<tr class="main_nav">
<td width="600">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">ZURB</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">STUDIOS</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">NOTABLE</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">FOUNDATION</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">BLOG</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">FORUM</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="main_img">
<td width="600">
<img src="img/zurb.png" alt="" style="display: block; border: 0;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment