Creating Adaptive Table Based Floating Column Email without Media Query -
unfortunately program use send out email not allow @media queries nor .css lists @ top of said code. problematic seeing building email template based around floating columns. 2 columns next 1 while viewing on tablet or desktop, have list drop underneath content panel while viewing on mobile device.
here base of have:
<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;"> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="1" style="width: 100%;"> --banner image here-- </td> </tr> </tbody> </table> <table style="width: 100%;"> <tbody> <tr> <td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td> <td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td> </tr> </tbody> </table> </div>
it's doable. without media queries limited how involved get. work if columns of equal width. i'm not sure how design is, without media query challenging make columns. here roughed out html going.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>untitled document</title> </head> <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;"> <tr> <td width="650"> <table cellpadding="0" cellspacing="0"> <tr> <td colspan="1" style="width: 100%;"> --banner image here-- </td> </tr> </table> <table align="left" width="320"> <tr> <td align="left" valign="top" width="320" bgcolor="#00cc99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td> </tr> </table> <table align="left" width="180"> <tr> <td align="left" valign="top" width="180" bgcolor="#99cc33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body>
Comments
Post a Comment