So I'm trying to build my first responsive email, and everything is going pretty well except for my two navigation areas. The first one, I have four buttons that I would like to rearrange from running across, to stacking two ontop of two. It worked in my initial testing, but then when I sent it through my email provider, the first two tds rendered properly (both 50%) but the two that were supposed to lay underneath were all squished up to the side. Same for the second navigation I was trying to do (except, I wanted the three to switch to 100% on top of each other)
Any suggestions on how to fix this would be greatly appreciated! Here is my code (which, is working fine here, but breaks in on all mobile when I actually send it out):
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 50%;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
} <!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656">
<tr>
<td class="main_nav" width="600" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
I would suggest swapping out your inline cells for aligned tables. Cells won't play nice with 50%, you always need to go just under that. In saying that, your cells will never align correctly, which you'll see in my version below.
One draw back to using aligned tables so close is that you'll need to add in ghost tables around your tables, to ensure Outlook respects the close alignment you want and doesn't add the 20px margin it requires between tables.
I only made a tweak to your original cell width, to 49% in the header CSS and then I created my aligned tables version in a new row underneath your original code, with a new main_nav_inner class inside of my wrapping table.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 49%;
}
td[class="main_nav2"] .main_nav_inner table {
width: 50%!important;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav2 {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav3 {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
</style>
</head>
<body style="min-width: 100%; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" yahoo="fix">
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656" width="100%">
<tr>
<td class="main_nav" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td class="nav4" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="main_nav2" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="main_nav_inner">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav1" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav2" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav3" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav4" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
</body>
</html>