MMUneven Table Widths on Mobile
Hello,
I am coding the attached email for a client, and no matter what I try I can't get a three column table to line up with the other tables in the email. This is only a problem on the mobile platforms, when the email shifts its size responsively.
I can't make this element three separate tables, because I need the background color to extend to the same length in all of them. (Unless someone has a solution for this).
Can anyone please take a look at the code and give me any pointers on what you think may be the problem?
Thank you!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
.responsive td { display:block; }
}
@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
.responsive td { display:block; }
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- One Column -->
<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<a href="#"><img class="deviceWidth" src="http://www.moontidemedia.com/email/pga/leaderboard.jpg" alt="" border="0" style="display: block; " /></a>
</td>
</tr>
</table>
<div style="height:15px"> </div><!-- spacer -->
<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr align="center">
<td valign="top" style="padding:5px" bgcolor="#ffffff">
<a href="#"><img class="deviceWidth" src="http://www.moontidemedia.com/email/pga/theweek.png" alt="" border="0" style="display: block; align:center; " /></a>
</td>
</tr>
</table>
<!-- End One Column -->
<!-- Start Header-->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%">
<!-- Nav -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-color: #2d4258; text-align:center; font-style: normal; font-size: 14px; font-weight: light; line-height: 22px; vertical-align: middle; padding:10px 0px; border-bottom: 1px solid #2d4258; border-top: 1px solid #2d4258;">
<a href="#" style="text-decoration: none; color: #2d4258;">Northwest</a>
<a href="#" style="text-decoration: none; color: #2d4258;">west</a>
<a href="#" style="text-decoration: none; color: #2d4258;">east</a>
<a href="#" style="text-decoration: none; color: #2d4258;">northwest</a>
<a href="#" style="text-decoration: none; color: #2d4258;">NMC wire</a>
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/facebook.jpg" alt="alt text" border="0" height="13" ></a>
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/twitter.jpg" alt="alt text" border="0" height="13" ></a>
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/youtube.jpg" alt="alt text" border="0" height="13" ></a>
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/instagram.jpg" alt="alt text" border="0" height="13"></a>
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<div style="height:15px"> </div><!-- spacer -->
<!-- One Column -->
<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<a href="#"><img class="deviceWidth" src="http://www.moontidemedia.com/email/pga/main-1.jpg" alt="" border="0" style="display: block; " /></a>
</td>
</tr>
</table><!-- End One Column -->
<div style="height:15px"> </div><!-- spacer -->
<table width="580" class="deviceWidth one" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="vertical-align:top; padding:10px; align:center; border-left: solid 1pt #666666;
background-color: #efede5; text-align: left;">
<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA NATIONAL</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong style="color: #66666;">Ut enim ad minim veniam, quis nostrud.</strong> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<span style="padding: 5px 5px; width:176px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align: right; text-decoration: none; display: block;">
<!--[if mso]> <![endif]-->More National News »<!--[if mso]> <![endif]-->
</span>
</td>
</tr>
</table>
<div style="height:15px"> </div><!-- spacer -->
<!-- Dark Background, Three Column Images -->
<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth responsive">
<tr width="580">
<td valign="top" width="32%" align="left" cellpadding="0" cellspacing="0" style="border-left: solid 1pt #666666; background-color: #efede5; text-align: left; padding:10px " class="deviceWidth">
<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA West</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong style="color: #66666;">Ut enim ad minim veniam, quis nostrud.</strong> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<span style="padding: 5px 5px; width:150px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">
<!--[if mso]> <![endif]-->More west News »<!--[if mso]> <![endif]-->
</span>
</td><!-- End Image 1 -->
<td style="padding:5px;" align="center" class="devicewidth" valign="top">
</td>
<td valign="top" width="32%" align="left" cellpadding="0" cellspacing="0" style="border-left: solid 1pt #666666; background-color: #efede5; text-align: left; padding:10px " class="deviceWidth">
<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA East</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<span style="padding: 5px 5px; width:150px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">
<!--[if mso]> <![endif]-->More East News »<!--[if mso]> <![endif]-->
</span>
</td><!-- End Image 2 -->
<td style="padding:5px;" align="center" class="devicewidth" valign="top">
</td>
<td valign="top" width="32%" align="left" cellpadding="0" cellspacing="0" style="border-left: solid 1pt #666666; background-color: #efede5; text-align: left; padding:10px " class="deviceWidth">
<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA NorthWest</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<span style="padding: 5px 5px; width:150px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align: right; text-decoration: none; display: block;">
<!--[if mso]> <![endif]-->More N.W. News »<!--[if mso]> <![endif]-->
</span>
</td><!-- End Image 3 -->
</tr>
</table><!-- End 3 Small Images -->
<!-- Dark Background, Three Column Images -->
<div style="height:15px"> </div><!-- spacer -->
<!-- Two Column (Images Stacked over Text) -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">
<tr>
<td class="center" style="padding:0px">
<table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<!-- The paragraph tag is important here to ensure that this table floats properly in Outlook 2007, 2010, and 2013
To learn more about this fix check out this link: http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
This fix is used for all floating tables in this responsive template
The margin set to 0 is for Gmail -->
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="267" src="http://www.moontidemedia.com/email/pga/img.jpg" alt="" border="0" style="width: 282px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > Headline</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>
<span align="right" style="padding: 5px 5px; align:right; width:120px; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">
<!--[if mso]> <![endif]-->FULL STORY »<!--[if mso]> <![endif]-->
</span>
</td>
</tr>
</table>
<table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="267" src="http://www.moontidemedia.com/email/pga/img.jpg" alt="" border="0" align="right" style="width: 282px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > Headline</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>
<span align="right" style="padding: 5px 5px; align:right; width:120px; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">
<!--[if mso]> <![endif]-->FULL STORY »<!--[if mso]> <![endif]-->
</span>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Two Column (Images Stacked over Text) -->
<div style="height:15px"> </div><!-- spacer -->
<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">
<tr>
<td valign="top">
<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding: 5px 10px 0px 0px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.moontidemedia.com/email/pga/ad.png" alt="" border="0" style=" width: 185px;" class="deviceWidth" /></a></p>
</td>
</tr>
</table><!-- End Image 1 -->
<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding: 5px 10px 0px 0px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.moontidemedia.com/email/pga/ad.png" alt="" border="0" style=" width: 185px;" class="deviceWidth" /></a></p>
</td>
</tr>
</table><!-- End Image 2 -->
<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding: 5px 0px 0px 0px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.moontidemedia.com/email/pga/ad.png" alt="" border="0" style=" width: 185px" class="deviceWidth" /></a></p>
</td>
</tr>
</table><!-- End Image 3 -->
</td>
</tr>
</table><!-- End 3 Small Images -->
<!-- Dark Background, Three Column Images -->
<div style="height:25px"> </div><!-- spacer -->
<!-- Start Header-->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%">
<!-- Nav -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-color: #2d4258; text-align:center; font-style: normal; font-size: 14px; font-weight: light; line-height: 22px; vertical-align: middle; padding:10px 5px; border-bottom: 1px solid #2d4258; border-top: 1px solid #2d4258;">
<a href="#" style="text-decoration: none; color: #2d4258;">Contact</a>
<a href="#" style="text-decoration: none; color: #2d4258;">welcome new members</a>
<a href="#" style="text-decoration: none; color: #2d4258;">Jobs</a>
<a href="#" style="text-decoration: none; color: #2d4258;">PGA Green</a>
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<div style="height:25px"> </div><!-- spacer -->
<!-- 4 Columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#000000" style="padding:30px 0">
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color:#999; font-family: Arial, sans-serif; padding-bottom:20px" class="center">
You are receiving this email because 1.) You're an awesome customer of "Company Name" or 2.) You subscribed via <a href="" style="color:#2ca1d3;text-decoration:none;">our website</a>
Want to be removed? No problem, <a href="" style="color:#2ca1d3;text-decoration:none;">click here</a> and we won't bug you again.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 4 Columns -->
</td>
</tr>
</table> <!-- End Wrapper -->
</body>
</html>
Why do you need them to all be the same height? You could always set a fixed height on the <div>'s. On mobile I don't see as much of a reason to have them be the same height though. I suggest you set up a media query to make the 3 columns all 100% on mobile. Then you would be able to make them all separate tables.
Thanks for the response! I agree that having equal height doesn't matter on mobile, which is why I am asking about width. The width of the table with the columns isn't the same as the other tables, even though - as you will see in the code - it is set to fill the device width just like the other elements.
The reason the columns need to be the same height for the other platforms is so that they will be uniform regardless of the amount of content inside them.
Well for starters I'm having a really difficult time reading the code because it is un-aligned. Can you post a version with organized nested tables, or even attach the .html file (I assume pasting the code here un-aligned everything)?
Secondly, I'm correct in that you are looking to make each of the 3 columns the same width as the first right? That's why I suggested you make them each their own table within a table with a set height. Then you could write a query to make the 3 columns 100% on mobile.
I started playing around with the code. It's not perfect but I was able to get it to respond by putting each column into tables and kept the background color by placing it on the parenting <td>
Melissa! Thank you! I can't say enough how helpful this is!
Having the border & background color work with the responsive tables was such a mess! I am SO grateful for your help! Thank you thank you!