css - Getting HTML nested tables in email to stack vertically on mobile -
i building out email exacttarget (so no bootstrap or other useful magic tools), , need 2 content blocks stack vertically on mobile. however, no matter i've tried, cannot them stack. also, including code below @ throws off margins handful of different browsers , email clients. rest of email perfect otherwise:
<td height="45" width="35%" bgcolor="#e4e4e4" style="vertical-align: top"><img src="http://image.bcbst-email.com/lib/fe8e1273736c027c76/m/1/top_border_c+copy.png" /><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #eeeeee; text-align: right"></span> <table width="100%" style="border-spacing:0;"> <td height="45" width="5%"><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> <td height="45" width="21%" valign="top" style="padding-top: 15px;"><img src="http://image.bcbst-email.com/lib/fe8e1273736c027c76/m/1/money_icon_b.png" align="middle"/><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> <td height="45" width="5%"><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> <td height="45" width="64%"><p style="font-family: tahoma, geneva, sans-serif; font-size: 16px; line-height: 20px; color: #444444; text-align: left; padding-top: 10px; padding-bottom: 10px;"><span style="font-family: tahoma, geneva, sans-serif; font-weight: bold; font-size: 18px; mso-line-height-rule:exactly; line-height: 20px; color: #0079c2;">lorem ipsum</span><br> <br>"neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> </td> <td height="45" width="5%"><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> </table></td> <td height="45" width="10%" style="vertical-align: middle"></td> <td height="45" width="35%" bgcolor="#e4e4e4" style="vertical-align: top"><img src="http://image.bcbst-email.com/lib/fe8e1273736c027c76/m/1/top_border_c+copy.png" /><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #eeeeee; text-align: right"></span> <table width="100%" style="border-spacing:0;"> <td height="222" width="5%"><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> <td height="222" width="21%" valign="top" style="padding-top: 15px;"><img src="http://image.bcbst-email.com/lib/fe8e1273736c027c76/m/1/list_icon_b.png" align="middle"/><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> <td height="222" width="5%"><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> <td height="222" width="64%"><p style="font-family: tahoma, geneva, sans-serif; font-size: 16px; line-height: 20px; color: #444444; text-align: left; padding-top: 10px; padding-bottom: 10px;"><span style="font-family: tahoma, geneva, sans-serif; font-weight: bold; font-size: 18px; mso-line-height-rule:exactly; line-height: 20px; color: #0079c2;">lorem ipsum</span><br> <br>"neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."<br><br></p> </td> <td height="222" width="5%"><span style="font-family: tahoma, geneva, sans-serif; font-size: 14px; color: #444444; text-align: right"></span></td> </table></td> </tr> </table></td> </tr> here css i'm using whole email:
<body style="background-color:#eeeeee; margin:0; padding:0; min-width:100%;"> <style type="text/css"> *[class=mobile]{display:none;} @media screen , (max-width:650px) { *[class=desktop]{display:none !important; background:none!important;} } @media screen , (max-width: 649px) { *[class="column"], *[class="two-column"] { width: 100%!important; max-width: 649px!important; } *[class="rightrail"] { max-width: 100%!important; } *[class="rightrail"] img { width: 100%!important; } *[class="nomobile"] { overflow: hidden !important; float: none !important; display: none !important; line-height:0% !important; } } @media screen , (max-width: 500px) { *[class=desktop]{ display:block!important; font-size: 14px!important; max-height: 100%!important; line-height: 20px!important; text-align: center;!important; } div[class=desktop]{ display:block!important; font-size: 14px!important; max-height: 100%!important; line-height: 20px!important; margin: 0 auto!important; text-align:center!important; } *[class="mobileonly"] { overflow: visible !important; float: none !important; display: block !important; line-height:100% !important; } *[class=desktop] table { display: inline-block!important; font-size: 14px!important; max-height: 100%!important; line-height: 20px!important; width: 100%!important; text-align: center!important; margin: 0 auto; max-width: 140px!important; } *[class="padding"] { padding: 0 5% !important; } *[class=desktop] { display:block!important; font-size: 14px!important; max-height: 100%!important; line-height: 20px!important; padding: 8px 20px!important; } *[class="column"], *[class="two-column"] { width: 90%!important; } } </style> i stumped. in advance help!!
Comments
Post a Comment