|
List With Thumbnails v2
List items start out as a two column layout and stack to a single column. The thumbnail images also scale down as the screen size shrinks.
<style>
/* List with Thumbnails V2 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: 48%;
}
td[class="pattern"] .col:first-child {
margin-right: 4%;
}
td[class="pattern"] .col td {
width: 70%;
padding-right: 0 !important;
}
td[class="pattern"] .col td:first-child {
width: 30%;
}
}
@media only screen and (max-width: 520px) {
td[class="pattern"] .col {
width: 100%;
display: block;
padding-bottom: 0 !important;
margin-bottom: 20px;
}
td[class="pattern"] .col:first-child {
margin-right: 0;
}
td[class="pattern"] .row:last-child .col:last-child { margin-bottom: 0; }
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="pattern" width="600">
<table cellpadding="0" cellspacing="0">
<tr class="row">
<td class="col" valign="top" width="300" style="padding-bottom: 20px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
</td>
<td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
<strong style="line-height: 30px !important;">Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
<td class="col" valign="top" width="300" style="padding-bottom: 20px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
</td>
<td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 0 0 16px;">
<strong style="line-height: 30px !important;">Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
</tr>
<tr class="row">
<td class="col" width="300">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
</td>
<td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
<strong style="line-height: 30px !important;">Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
<td class="col" width="300">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
</td>
<td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 0 0 16px;">
<strong style="line-height: 30px !important;">Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>