|
2 Equal Width Columns v2
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 V2 Layout Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] table { width: 100%; }
td[class="pattern"] .hero_image img {
width: 100%;
height: auto !important;
}
}
@media only screen and (max-width: 450px) {
td[class="pattern"] .spacer { display: none; }
td[class="pattern"] .col{
width: 100%;
display: block;
}
td[class="pattern"] .col:first-child { margin-bottom: 30px; }
td[class="pattern"] .hero_image img { width: 100%; }
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="pattern" width="600" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="col" width="290" valign="top">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="hero_image"><img src="http://placehold.it/450x150" width="290" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td class="headline" align="left" style="font-family: arial,sans-serif; font-size: 22px; color: #333; padding-top: 15px;">
This is a story headline
</td>
</tr>
<tr>
<td class="body_copy" align="left" style="font-family: arial,sans-serif; font-size: 14px; line-height: 20px !important; color: #7f7f7f; padding-top: 10px;">
Virtual computing via the cloud is all the rage these days but blade servers, which make up the bulk of the infrastructure for cloud computing systems, require specific fusing for high reliability and uptime. The Littelfuse 456 Series--- NANO2 Subminature Surface Mount Fuse - is perfect for this.
</td>
</tr>
<tr>
<td align="left" style="padding-top: 15px;"><img src="http://placehold.it/118x34/333&text=Learn+More" alt="Learn More" style="display: block; border: 0;" /></td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col" width="290" valign="top">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="hero_image"><img src="http://placehold.it/450x150" width="290" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td class="headline" align="left" style="font-family: arial,sans-serif; font-size: 22px; color: #333; padding-top: 15px;">
This is a story headline
</td>
</tr>
<tr>
<td class="body_copy" align="left" style="font-family: arial,sans-serif; font-size: 14px; line-height: 20px !important; color: #7f7f7f; padding-top: 10px;">
Virtual computing via the cloud is all the rage these days but blade servers, which make up the bulk of the infrastructure for cloud computing systems, require specific fusing for high reliability and uptime. The Littelfuse 456 Series--- NANO2 Subminature Surface Mount Fuse - is perfect for this.
</td>
</tr>
<tr>
<td align="left" style="padding-top: 15px;"><img src="http://placehold.it/118x34/333&text=Learn+More" alt="Learn More" style="display: block; border: 0;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>