|
List With Thumbnails
List items start out as a single row and reflow to a two column layout. The thumbnail images also scale down as the screen size shrinks.
<style>
/* List with Thumbnails Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] img {
width: 100%;
height: auto !important;
}
td[class="pattern"] .col {
width: 25%;
}
}
@media only screen and (max-width: 430px) {
td[class="pattern"] .col {
width: 50%;
float: left;
margin-bottom: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
td[class="pattern"] .col table,
td[class="pattern"] .col img { width: 100%; }
}
@media only screen and (max-width: 380px) {
td[class="pattern"] .col {
width: 100%;
display: block;
float: none;
padding: 0 !important;
}
td[class="pattern"] .col tr {
display: table-cell;
width: 60%;
}
td[class="pattern"] .col tr:first-child {
width: 40%;
padding-right: 20px;
}
td[class="pattern"] .col td {
font-size: 16px !important;
}
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="pattern" width="600">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="col" width="140" style="padding: 0 5px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
<strong>Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
<td class="col" width="140" style="padding: 0 5px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
<strong>Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
<td class="col" width="140" style="padding: 0 5px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
<strong>Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
<td class="col" width="140" style="padding: 0 5px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
<strong>Title of Content</strong><br />
Summary of content
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>