I've been reading and researching how to build a responsive email - the thing is I am building it using a table. I know tables are not responsive by nature; however, I've been reading up on responsive design, media queries, and such and I still cannot find a solution. Below is what I have so far. Any help would be greatly appreciated as I would like to learn how to make an email responsive.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trident Email</title>
<style type="text/css">
@media (max-width: 480px){
table,tbody,tr,td,img {
display:block;
}
div#background {
width: 400px;
}
table#container{
width:300px;
}
}
</style>
</head>
<body>
<div id="background" style="background-color:#eeee00;padding:10px 0;margin:0 320px;">
<table style="margin:0px auto;border-spacing:0px;border-collapse:collapse;text-align:center;" cellpadding="0" cellspacing="0" width="600" align="center">
<tbody>
<tr>
<td>
<table id="container" style="border-spacing:0px;border-collapse:collapse;" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2384384346-jpg/Headers_Footers/Trident_is_Coming_to_Town.jpg?t=1446144504152" width="100%" style="vertical-align:bottom;">
</td>
</tr>
<tr>
<td>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td></td>
<tr>
<td style="text-align:left;" width="65%">
<table cellpadding="5" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<div style="">
<p><span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>Date:</strong></span></p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>November 2, 2015</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>time:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>10:00AM - 2:00PM</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>location:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;line-height:1.5;"><strong>Fort Rucker Army Installation<br/>Bldg.4502, Room 303</strong></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="35%" style="text-align:right;">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2668017528-jpg/images/Outreach/James_Shiver_175px.jpg?t=1446144504152" width="100%">
</div>
<p style="text-align:left;" color="#ffffff" align="left"><span style="font-family: helvetica; color: #ffffff;" color="#ffffff"><strong>James Shiver</strong></span><br/><span style="font-family: helvetica; font-size: 13px; color: #ffffff;">334-470-9146</span><br><a href="mailto:[email protected]" style="text-decoration:none;" data-hs-link-id="0" target="_blank"><span style="color: #ffffff;">[email protected]</span></a></p>
</td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="80">
<div style="border-top:2px solid #9c800d;width:98%">
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Can't stop by? Visit us Online:
</p>
</div>
</td>
<td width="20"></td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);text-align:center;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td width="20"></td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
<a href="../www.trident.edu/james" style="color:#ffffff;text-decoration:none;font-size:14px;" target="_blank">trident.edu/james</a>
</p>
</div>
</td>
<td width="">
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
<a href="http://www.trident.edu/news-and-events?cid=701E00000007j5C" style="color:#ffffff;text-decoration:none;font-size:14px;" target="_blank">News and Events</a>
</p>
</div>
</td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
<a href="http://blog.trident.edu?cid=701E00000007j5C" style="color:#ffffff;text-decoration:none;font-size:14px;" target="_blank">University Blog</a>
</p>
</div>
</td>
<td width="20"></td>
</tr>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="60">
<div>
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Trident University<br/>1212 Plaza Dr.<br/>Cypress, CA 90630
</p>
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2102317013-png/outreach_emblem-188px.png?t=1446144504152&width=80&name=outreach_emblem-188px.png" width="80" align="center">
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60"><p style="color:#ffffff;font-size:13px"><a href="#" style="color:#ffffff;">Unsubscribe</a></p></td>
<td width="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to include an
!importantin the media query in the<style>so that it can override the inline styles in the email body. This allows table cells to became full width and stack on small viewports.Here is a basic example of responsive 2-column email layout using media queries:
Full code available here