KS0
<td> Column is Not Working for 100% in Android 4.4 and 5.1
Hi All,
I have pasted my below code to fix the td width should be 100% in Android 4.4 & 5.1. I have tried in many ways but i couldn't find the solution, can anyone help me on this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Missing your Circle Safe Premium features? They miss you too.</title>
<style type="text/css">
/* RESET STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Win mobile changing default text sizes*/
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in IE */
body {
margin: 0 !important;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
margin: 0;
padding: 0;
min-width: 100%;
width: 100% !important;
font-family: Helvetica, Arial, sans-serif;
}
.appleLinksAB {
color: #999999 !important;
text-decoration: none !important;
}
/* Prevent iOS from highlighting address,phone in blue */
/* TABLET STYLES */
@media only screen and (min-width: 481px) and (max-width: 640px) {
table.cw-container {
width: 100%!important;
}
/* Make the containing section span the entire width */
table[class=cw-4x4] {
width: 100%;
}
/* Suggested help row - table moves to full width */
img[class=cw-4x4] {
margin: 0 auto;
}
.img-responsive {
width: 100%;
}
.templateColumns, .templateColumnContainer { width: 100% !important; }
.templateColumnContainer {
display: block !important;
width: 100% !important;
}
.leftColumnContent, .centerColumnContent, .rightColumnContent { min-height: auto !important;}
.templateColumnContainer { margin-bottom: 20px; text-align: center;}
/* Vanity column - ICON image maintains size, center align */
}
/* PHONE STYLES */
@media only screen and (max-width: 480px) {
table.cw-container {
width: 100%!important;
}
/* Make the containing section span the entire width */
td.cw-center-on-mobile {
text-align: center;
}
/* Center TD text on mobile views */
table[class=cw-4x4] {
width: 100%;
}
/* Suggested help row - table moves to full width */
img[class=cw-4x4] {
margin: 0 auto;
}
/* Vanity column - ICON image maintains size, center align */
.hide-on-mobile {
display: none;
}
.img-responsive {
width: 100%;
}
.templateColumns, .templateColumnContainer { width: 100% !important; }
.templateColumnContainer {
display: block !important;
width: 100% !important;
}
.leftColumnContent, .centerColumnContent, .rightColumnContent { min-height: auto !important;}
.templateColumnContainer { margin-bottom: 20px; text-align: center;}
}
</style>
</head>
<body bgcolor="#e1e2e3" style="margin:0;padding:0;background-color:#e1e2e3;">
<!-- PRE-HEADER : BEGIN -->
<span style="text-decoration: none; color: #303030; font-family: arial; display:none; font-size:1px; line-height:1px; max-height:0px; max-width:0px; opacity:0;">Upgrade now. Circle Safe Premium gives you access to features like Person Dection and Motion Zones.</span>
<!-- PRE-HEADER : END -->
<!-- BODY INTRO : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tbody>
<tr>
<td align="center" bgcolor="#e1e2e3" style="padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="cw-container">
<tbody>
<tr>
<td align="center" bgcolor="#2f3132">
<table border="0" style="padding-right:10px; padding-left:10px;" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td align="center">
<a href="https://circle.logi.com/?track=logo" target="_blank" style="display: inline-block;"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/logi-wht-logo.png" alt="Logitech" border="0" width="108" height="33" style="display:block; border:none; outline:none; text-decoration:none; font-size: 14px; cursor:default;" class="cw-4x4"/>
</a>
</td>
</tr>
<tr>
<td height="50" style="font-size:50px; line-height:50px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center" style="font-size: 32px; font-weight:bold; line-height:32px; padding-left:25px; padding-right:25px; font-family: Helvetica, Arial, sans-serif; color:#ffffff;">BRING BACK THE CIRCLE SAFE FEATURES YOU’RE MISSING</td>
</tr>
<tr>
<td height="25" style="font-size:25px; line-height:25px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="cw-container">
<tbody>
<tr>
<td align="center">
<a href="https://circle.logi.com" target="_blank" style="cursor:default;"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/day17-heroImg.jpg" alt="Upgrade to Circle Safe Premium to access Smart Alerts with Person Detection and Motion Zones" border="0" width="600" height="296" style="display:block; border:none; outline:none; text-decoration:none; font-size: 14px;" class="img-responsive hero-responsive" />
</a>
</td>
</tr>
</tbody>
</table>
<!--Middle Section Start-->
<table bgcolor="#2f3132" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="cw-container">
<tbody>
<tr>
<td height="30" style="font-size:30px; line-height:30px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center" style="color:#ffffff; padding-left:25px; padding-right:25px; font-size:14px; font-family: Helvetica, Arial, sans-serif; line-height:18px;">
Nosey neighbor or unwanted visitor? It’s never too late to upgrade to Circle Safe Premium to bring back Smart Alerts with Person Detection and Motion Zones. We’ve got plans that work for everyone.
</td>
</tr>
<tr>
<td height="30" style="font-size:30px; line-height:30px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="cw-container">
<tbody>
<tr>
<td height="25" style="font-size:25px; line-height:25px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="cw-container">
<tbody>
<tr>
<td align="center" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; padding-left:15px; padding-right:15px; color:#000000;">GET THE CIRCLE SAFE PLAN<br/>THAT'S JUST RIGHT FOR YOU</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="560" class="cw-container templateColumns">
<tr>
<td align="center" valign="top" width="33%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="font-size:12px; color:#000000;">
<tr>
<td valign="top" class="leftColumnContent" style="min-height:50px; font-family: Helvetica, Arial, sans-serif; display:block; font-size:14px;">
<span style="font-weight:bold;color:#000000;">CIRCLE FREE</span>
<br/>
<span style="color:#000000">FREE</span>
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent" style="font-family: Helvetica, Arial, sans-serif;">
<span style="line-height:20px;color:#000000;">1-Day of Storage<br/>
Unlimited Streaming<br/>
Unlimited Downloads<br/>
Smart Events<br/>
Smart Alerts<br/>
Smart Time-lapse Day Briefs
</span>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="33%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="font-size:12px; color:#000000;">
<tr>
<td valign="top" class="centerColumnContent" style="min-height:50px; display:block; font-family: Helvetica, Arial, sans-serif; font-size:14px;">
<span style="font-weight:bold;color:#000000;">CIRCLE SAFE BASIC</span>
<br/>
<span style="color:#000000">$3.99/month per camera</span>
</td>
</tr>
<tr>
<td valign="top" class="centerColumnContent" style="font-family: Helvetica, Arial, sans-serif;">
<span style="line-height:20px;color:#000000;">14-Days of Storage<br/>
Unlimited Streaming<br/>
Unlimited Downloads<br/>
Smart Events<br/>
Smart Alerts<br/>
Smart Time-lapse Day Briefs
</span>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="33%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="font-size:12px; color:#000000;">
<tr>
<td valign="top" class="rightColumnContent" style="min-height:50px; font-family: Helvetica, Arial, sans-serif; display:block; font-size:14px;">
<span style="font-weight:bold;color:#000000;">CIRCLE SAFE PREMIUM</span>
<br/>
<span style="color:#000000">
$9.99/month per camera or $99.99/year per camera
</span>
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent" style="font-family: Helvetica, Arial, sans-serif; ">
<span style="line-height:20px;color:#000000;">31-Days of Storage<br/>
Unlimited Streaming<br/>
Unlimited Downloads<br/>
Smart Events<br/>
Smart Alerts<br/>
Custom Smart Time-lapse Day Briefs<br/>
Person Detection<br/>
Motion Zones<br/>
Advanced Event and Alert Filters
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="font-size:30px; line-height:30px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://circle.logi.com" style="height:40px;v-text-anchor:middle;width:135px;" arcsize="0%" stroke="f" fillcolor="#2f3132">
<w:anchorlock/>
<center style="color:#dcfd00;font-family:helvetica, arial, sans-serif;font-size:12px;font-weight:bold;">
UPGRADE NOW
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a href="https://circle.logi.com" target="_blank" style="background-color:#2f3132;border-radius:0px; color:#dcfd00; display:inline-block;font-family: helvetica, arial, sans-serif;font-size:12px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:135px;-webkit-text-size-adjust:none;">UPGRADE NOW</a>
<!--<![endif]-->
</div>
</td>
</tr>
<tr>
<td height="40" style="font-size:40px; line-height:40px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!--Middle Section End-->
<!-- FOOTER : BEGIN -->
<table border="0" style="min-width:100%; padding-left:5px; padding-right:5px;" width="100%" bgcolor="#dcfd00" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15" style="font-size:15px; line-height:15px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center" style="font-size:14px; font-weight:bold; font-family: helvetica, arial, sans-serif; color:#000000;">Security Made Simple. <a href="https://www.instagram.com/explore/tags/circleit/?hl=en" target="_blank" style="color:#000000; text-decoration:none;">#CircleIt</a>
</td>
</tr>
<tr>
<td height="15" style="font-size:15px; line-height:15px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td width="100%" style="padding: 0;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="142">
<tbody>
<tr>
<td width="22" height="22" style="padding: 0;">
<a target="_blank" href="https://www.facebook.com/Logitech.US"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/social-facebook-blk.png" alt="FB" border="0" width="22" height="22" style="border:none; outline:none; text-decoration:none; width: 22px; height: 22px; color: #ABABAB;"/></a>
</td>
<td width="8" height="22" style="padding: 0;"> </td>
<td width="22" height="22" style="padding: 0;">
<a target="_blank" href="https://twitter.com/Logitech"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/social-twitter-blk.png" alt="TW" border="0" width="22" height="22" style="border:none; outline:none; text-decoration:none; width: 22px; height: 22px; color: #ABABAB;"/></a>
</td>
<td width="8" height="22" style="padding: 0;"> </td>
<td width="22" height="22" style="padding: 0;">
<a target="_blank" href="https://www.youtube.com/logitech"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/social-youtube-blk.png" alt="YT" border="0" width="22" height="22" style="border:none; outline:none; text-decoration:none; width: 22px; height: 22px; color: #ABABAB;"/></a>
</td>
<td width="8" height="22" style="padding: 0;"> </td>
<td width="22" height="22" style="padding: 0;">
<a target="_blank" href="https://plus.google.com/+logitech"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/social-googleplus-blk.png" alt="G+" border="0" width="22" height="22" style="border:none; outline:none; text-decoration:none; width: 22px; height: 22px; color: #ABABAB;"/></a>
</td>
<td width="8" height="22" style="padding: 0;"> </td>
<td width="22" height="22" style="padding: 0;">
<a target="_blank" href="http://blog.logitech.com/"><img src="https://images.logitech.com/smarthome/emails/campaigns/circle/20170606-safeday17/social-blog-blk.png" alt="BG" border="0" width="22" height="22" style="border:none; outline:none; text-decoration:none; width: 22px; height: 22px; color: #ABABAB;"/></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size:10px; line-height:10px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td width="100%" align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 11px; color: #000000; text-align:center; padding-left: 10px; padding-right: 10px; padding-top: 0; padding-bottom: 0;">
<a href="http://www.logitech.com/" style="text-decoration: none; color: #000000; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px" target="_blank">Logitech.com</a> | <a href="http://support.logitech.com/product/circle" style="text-decoration: none; color: #000000; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px" target="_blank">Support</a> | <a href="http://www.logitech.com/footer/privacy" style="text-decoration: none; color: #000000; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px" target="_blank">Privacy Policy</a> | <a href="http://www.logitech.com/footer/terms-of-use" style="text-decoration: none; color: #000000; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px" target="_blank">Terms of Use</a> | <a href="*|UNSUB|*" style="text-decoration: none; color: #000000; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px" target="_blank">Unsubscribe</a>
</td>
</tr>
<tr>
<td height="15" style="font-size:15px; line-height:15px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- FOOTER : END -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- BODY INTRO :: END -->
<!-- POST-FOOTER : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tbody>
<tr>
<td align="center" bgcolor="#e1e2e3" style="padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="cw-container">
<tbody>
<tr>
<td height="20" style="font-size:20px; line-height:20px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center" style="font-family: Helvetica, arial, sans-serif; font-size: 11px; color: #999999; text-align:center; padding-left: 5px; padding-right: 5px; padding-top: 0; padding-bottom: 0;">
<span style="text-decoration: none; color: #999999; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px">You are receiving this e-mail because our records indicate you requested that we send information to *|EMAIL|* regarding special offers, newsletters, product information and updates from Logitech.</span>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center" style="font-family: Helvetica, arial, sans-serif; font-size: 11px; color: #999999; text-align:center; padding-left: 5px; padding-right: 5px; padding-top: 0; padding-bottom: 0;">
<span style="text-decoration: none; color: #999999; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px">© Copyright 2017 Logitech. All rights reserved. Logitech, the Logitech logo and other Logitech marks are owned by Logitech and may be registered. All other trademarks are the property of their respective owners.</span>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td align="center" style="font-family: Helvetica, arial, sans-serif; font-size: 11px; color: #999999 !important; text-align:center; padding-left: 5px; padding-right: 5px; padding-top: 0; padding-bottom: 0;">
<span style="text-decoration: none; color: #999999; font-family: 'Segoe UI', helvetica, arial, sans-serif, arial unicode MS; font-size: 11px" class="appleLinksAB">Logitech Smart Home Group 7700 Gateway Blvd. Newark, CA 94560 USA</span>
</td>
</tr>
<tr>
<td height="15" style="font-size:15px; line-height:15px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td><span style="color:#e1e2e3;font-size:5px;">TAG: e-c-circle-safeday17-20170506</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- POST-FOOTER : END -->
<!-- LITMUS ANALYTICS -->
<style data-ignore-inlining>@media print{ #_t { background-image: url('https://fkegeleh.emltrk.com/fkegeleh?p&d=*|EMAIL|*');}} div.OutlookMessageHeader {background-image:url('https://fkegeleh.emltrk.com/fkegeleh?f&d=*|EMAIL|*')} table.moz-email-headers-table {background-image:url('https://fkegeleh.emltrk.com/fkegeleh?f&d=*|EMAIL|*')} blockquote #_t {background-image:url('https://fkegeleh.emltrk.com/fkegeleh?f&d=*|EMAIL|*')} #MailContainerBody #_t {background-image:url('https://fkegeleh.emltrk.com/fkegeleh?f&d=*|EMAIL|*')}</style><div id="_t"></div>
<img src="https://fkegeleh.emltrk.com/fkegeleh?d=*|EMAIL|*" width="1" height="1" border="0" />
</body>
</html>
Hi Karthik,
Which Td's are we looking at?Found what i was after. You are trying to make td's into rows. TD's into rows can be done with TH only for Android 4.4 and below but inorder to use that you will need padding and margin to be zero for the td and font weight as normal (coz its table heading).
Now to address Android 5.1, After Android 5.0 google have been forcing users to use Gmail app. If you notice on Litmus when you do a test, it shows Gmail and no longer the generic email client.
Cheers
Thanks Shameer. I tried <th> instead of <td>, but the content is not center align when comes to mobile view. I mean the media query is not supporting here. Is there any workaround for this to fix?
Simply the <td> should occupy full width and the content should be center align in mobile view.
Hi Karthik,
Apologies for a late reply.
If th beaks columns into rows then you can use CSS to target those th to center your text. If you are not able to split the column into rows then what is on the desktop will be on the mobiles.
Cheers