2 culumn table will not fold on ipones
I have a responsive layout that displays two columns on desktop and web clients, then switches to one column in iPhone Mail and the default Android email client.
On Zoho it does not work.
I uploaded the html have included some of the code below for the syle and a table. Why does this not work in zoho??????????
Thank you for any assistance.
<style type="text/css">
/* Client-specific Styles */
div, p, a, li, td { -webkit-text-size-adjust:none; }
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
html{width: 100%; }
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #33b9ff;text-decoration: none;text-decoration:none!important;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #33b9ff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #33b9ff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:220px!important;}
img[class=thnbanner] {width: 440px!important;height:60px!important;}
img[class=col2img] {width: 200px!important;height:180px!important;}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #33b9ff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #33b9ff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=thnbanner] {width: 280px!important;height:40px!important;}
img[class=col2img] {width: 200px!important;height:180px!important;}
}
</style>
and 2 col table below.
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td height="10"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- content -->
<tr>
<td>
<table width="200" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<!-- image -->
<tr>
<td width="200" height="180" align="left">
<div class="imgpop">
<img src="
http://zohopublic.com/zohocampaigns/prod_zc_v2_83355000000193006.jpg" alt="" width="200" height="180" border="0" class="col2img" style="display:block; border:none; outline:none; text-decoration:none;">
</div>
</td>
</tr>
<!-- /image -->
</tbody>
</table>
<!-- end of left column -->
<!-- spacing for mobile devices-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of for mobile devices-->
<!-- start of right column -->
<table width="350" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td>
<table width="350" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- title -->
<tr>
<td style="font-family: Georgia, serif; font-size: 18px; color: #282828; text-align:left; line-height: 24px;">
1 FREE Shampoo
</td>
</tr>
<!-- end of title -->
<!-- title 2 -->
<tr>
<td style="font-family: Georgia, serif; font-size: 18px; color: #282828; text-align:left; line-height: 22px;">
Cut and Blow Dry
</td>
</tr>
<!-- end of title 2 -->
<!-- content -->
<tr>
<td style="font-family: Georgia, serif; font-size: 14px; color: #f66c00; text-align:left; line-height: 24px;">
Lorem ipsum usmod tempor.
</td>
</tr>
<!-- end of content -->
<!-- Spacing -->
<tr>
<td width="100%" height="25" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- /Spacing -->
<!-- read more -->
<tr>
<td>
<table width="250" height="32" bgcolor="#282828" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" style="border-radius:12px;">
<tbody>
<tr>
<td height="9" align="center" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="14" align="center" valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight:bold;color: #fcfcfc; text-align:center; line-height: 14px; ; -webkit-text-size-adjust:none;">
<a style="text-decoration: none;color: #fcfcfc; text-align:center;" target="_blank" href="
http://hannahonline.com.au/product/beauty/m16-studios/">Click here to Learn More</a>
</td>
</tr>
<tr>
<td height="9" align="center" style="font-size:1px; line-height:1px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end of read more -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End of content -->
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>