<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns"> <tr> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="leftColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="leftColumnContent"> <h1>Left Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> </tr> <tr> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="leftColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="leftColumnContent"> <h1>Left Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> </tr> <tr> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="leftColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="leftColumnContent"> <h1>Left Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> <td align="center" valign="top" width="50%" class="templateColumnContainer"> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td class="rightColumnContent"> <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" /> </td> </tr> <tr> <td valign="top" class="rightColumnContent"> <h1>Right Column</h1> Lorem ipsum dolor sit amet. </td> </tr> </table> </td> </tr> </table> </body> </html>
@media only screen and (max-width: 480px) { #templateColumns { width: 100% !important; } .templateColumnContainer { display: block !important; width: 100% !important; } .columnImage { height: auto !important; max-width: 480px !important; width: 100% !important; } .leftColumnContent { font-size: 16px !important; line-height: 125% !important; } .rightColumnContent { font-size: 16px !important; line-height: 125% !important; } }