|
2 Equal Width Columns
A layout that starts as 2 equal width columns and ends as a single column layout, stacking the left column on top of the right as the screen sizes get narrower.
<style>
/* 2 equal-width columns Layout Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] table { width: 100%; }
td[class="pattern"] img {
width: 100%;
height: auto !important;
}
td[class="pattern"] .col{
width: 50%;
}
}
@media only screen and (max-width: 450px) {
td[class="pattern"] .col{
width: 100%;
display: block;
}
td[class="pattern"] .col1{
margin-bottom: 16px;
}
td[class="pattern"] .description span {
display: block;
max-width: 300px;
}
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="pattern" width="600" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="background: #eee; padding: 20px 0;">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="col col1" width="300" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0 10px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-family: arial,sans-serif; font-size: 22px; color: #000; padding-bottom: 8px;">
This is a Headline
</td>
</tr>
<tr>
<td class="description" align="center" style="font-family: arial,sans-serif; font-size: 12px; color: #333; padding-bottom: 8px;">
<span>Neyla of indie band The Lumineers swings by our office to meet her namesake dress!</span>
</td>
</tr>
<tr>
<td align="center" style="font-family: arial,sans-serif; font-size: 14px; font-weight: bold; color: #000">
<a href="#" style="text-decoration: none; color: #000;">Check It Out »</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="300" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="padding: 0 10px;">
<img src="http://placehold.it/400x110&text=Image" width="300" alt="" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background: #eee; padding: 20px 0;">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="col col1" width="300" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0 10px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-family: arial,sans-serif; font-size: 22px; color: #000; padding-bottom: 8px;">
This is a Headline
</td>
</tr>
<tr>
<td class="description" align="center" style="font-family: arial,sans-serif; font-size: 12px; color: #333; padding-bottom: 8px;">
<span>Neyla of indie band The Lumineers swings by our office to meet her namesake dress!</span>
</td>
</tr>
<tr>
<td align="center" style="font-family: arial,sans-serif; font-size: 14px; font-weight: bold; color: #000">
<a href="#" style="text-decoration: none; color: #000;">Check It Out »</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="300" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="padding: 0 10px;">
<img src="http://placehold.it/400x110&text=Image" width="300" alt="" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>