Responsive email - Making a table expand in Gmail Android App

Hi All,

Have been a lurker for some time on the forums but first post as I'm stumped!

I've developed a template that is responsive in iOS (using media queries) and also on the Gmail Android app (using fluid layout). The problem is I have a left column with a table set to 252px max width and a right column set to 272px max width (both set to 100% width). When a smaller screen, the right column should sit underneath the left which is what is happening, however my left column with an image in is not expanding to 100% width (yet the right column below it is).

I've tried taking the max width off which makes the email work in everything except Gmail desktop. This has got me stumped and I'm wondering if anyone has a solution? Code below...(the conditional code is to make Outlook respect the widths of tables that don't have a width specified)

<!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.0"/>
<title>Early Upgrade</title>
<style type="text/css">
    body {-webkit-text-size-adjust:none; -ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;} 
    table {border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;margin:0; padding:0;} 
    td {border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;margin:0; padding:0;}
      img {height: auto;}
      .content {width: 100%; max-width: 600px;}
      .readonline {font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:13px; color:#FFFFFF;}
      .header {padding: 40px 30px 20px 30px;}
      .headline{padding:0px 24px 0px 24px;}
    .headline1{padding:0px 0px 0px 0px;}
      .headline2{padding:20px 30px 20px 30px;}
    .list{padding:0px 40px 0px 40px;}
      .innerpadding {padding: 30px 30px 30px 30px;}
      .borderbottom {border-bottom: 1px solid #f2eeed;}
      .subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
      .bodycopy {color: #6d6e71; font-family: Arial, Helvetica, sans-serif;}
      .h1 {}
      .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
    .cta{padding:0px 40px 0px 40px;}
      .bodycopy {font-size: 16px; line-height: 18px; padding:20px 40px 20px 40px; }
    .bodycopy2 {font-size: 16px; line-height: 18px; padding:20px 40px 20px 40px; }
      .boxcopy {font-size: 12px; line-height: 14px; color: #6d6e71; font-family: Arial, Helvetica, sans-serif;}
      .button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
      .button a {color: #ffffff; text-decoration: none;}
      .footer {padding: 20px 30px 15px 30px;}
      .footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
      .footercopy a {color: #ffffff; text-decoration: underline;}
      .fix {display: block;}
    .applelinks a {color:#6d6e71; text-decoration: none;}
    span[class=applelinks] {color:#6d6e71; text-decoration: none;}
    .applelinks-footer a {color:#6d6e71; text-decoration: none;}    
    

      @media only screen and (max-width: 550px), screen and (max-width: 550px) {
      body[yahoo] .hide {display: none!important;}
      body[yahoo] .buttonwrapper {background-color: transparent!important;}
      body[yahoo] .button {padding: 0px!important;}
      body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important;}
      body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}
      table[class=emailwrapto100pc], img[class=fix], table[class=emailfootercol]{width:100% !important; height:auto !important;}
      table[class=col252]{max-width:100% !important; height:auto !important; float:left !important;}
      table[class=col272]{width:100% !important; height:auto !important; float:left !important;}
      table[class=footerleft]{font-size:12px !important; line-height:13px !important; width:50% !important; height:auto !important; float:left !important;}
      table[class=footerright]{font-size:12px !important; line-height:13px !important; width:50% !important; height:auto !important; float:right !important;}
      td[class=fontshrink]{font-size:16px !important; line-height:20px !important; padding-left:10px !important; padding-bottom:5px !important;}
      td[class=fontshrink2]{font-size:16px !important; line-height:20px !important; padding-left:10px !important;}
      td[class=footershrink2]{font-size:12px !important; line-height:18px !important;}
      td[class=headline2]{padding:20px 0px 20px 0px !important;}
      td[class=headline1]{padding:0px 0px 0px 0px !important;}
      td[class=headline]{padding:0px 24px 0px 24px !important;}
      td[class=cta]{padding:0px 24px 0px 24px !important;}
      td[class=bodycopy]{padding:20px 24px 20px 24px !important;}
      td[class=bodycopy2]{padding:20px 24px 20px 24px !important;}
      img[class=emailnomob], tr[class=emailnomob], *[class=emailnomob]{display:none !important;}
      span[class=mobiletel] {font-size: 22px; display: block; padding: 3px 0 0;}
    
      
      div[class=phoneonly-img1]{
        display:block !important;
        overflow:visible !important;
        visibility:visible !important;
        max-height: 100% !important;
        min-height: 140px !important;
        mso-hide: all;
        width:100% !important;
        height:auto !important;
        }
        
        img[class=phoneonly-img1]{
        display:block !important;
        overflow:visible !important;
        visibility:visible !important;
        width:100% !important;
        height:auto !important;
        text-align:center !important;
        }
        
      div[class=phoneonly-img2]{
        display:block !important;
        overflow:visible !important;
        visibility:visible !important;
        max-height: 100% !important;
        min-height: 200px !important;
        mso-hide: all;
        width:100% !important;
        height:auto !important;
        }
        
        img[class=phoneonly-img2]{
        display:block !important;
        overflow:visible !important;
        visibility:visible !important;
        width:100% !important;
        height:auto !important;
        text-align:center !important;
        }
      }

      @media only screen and (min-width: 601px) {
        .content {width: 600px !important;}
        .col425 {width: 425px!important;}
        .col380 {width: 380px!important;}
        .col272 {width: 272px!important;}
        .col252 {width: 252px!important;}
        .footerleft {width: 265px!important;}
        .footerright {width: 249px!important;}
        .desktop{font-size: 16px; line-height: 18px; color: #6d6e71; font-family: Arial, Helvetica, sans-serif;}
        }

  </style>
</head>

<body>
<table width="100%" bgcolor="#f6f4f0" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
          <td align="center" valign="top">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                    <![endif]--> 
                        <table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" class="content" align="left" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 0;width: 100%;max-width: 600px;">
                            <!-- START ROAMING EE -->
                            <tr>
                                <td class="headline" valign="top">
                                    <!--[if (gte mso 9)|(IE)]>
                                    <table width="252" cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td>
                                    <![endif]--> 
                                                <table align="left" style="max-width: 252px;" width="100%" class="col252" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
                                                    <tr>
                                                        <td style="padding-bottom:15px;"><a href="#" target="_blank"><img src="http://i9.cmail3.com/ei/i/01/87F/C2D/024347/images/img1.png" width="100%" class="fix" border="0" alt="Save money on using your phone abroad" /></a></td>
                                                    </tr>
                                                </table>
                                            <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                        </tr>
                                    </table>
                                    <![endif]-->
                                    <!--[if (gte mso 9)|(IE)]>
                                    <table width="272" cellpadding="0" cellspacing="0" border="0" align="right">
                                        <tr>
                                            <td>
                                            <![endif]--> 
                                                <table class="col272" cellpadding="0" align="right" cellspacing="0" border="0" bgcolor="#FFFFFF" style=" width: 100%; max-width: 272px;">
                                                    <tr>
                                                        <td valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; color:#009c9c; font-size:16px; line-height:20px; font-weight:bold; padding-bottom:10px;"><a href="#" target="_blank" style="color:#009c9c;text-decoration:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#6d6e71; font-size:15px; line-height:17px; padding-bottom:25px;">Quisque bibendum massa ut pharetra semper. Cras vestibulum ultrices turpis quis ultrices. Praesent luctus enim at mollis dapibus</td>
                                                    </tr>
                                                </table>
                                            <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                        </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                            <!-- END ROAMING EE -->
                        </table>
                        <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
                

</body>
</html>
JD JD, 2 years ago

Hi Tweedskin! This may be one for our guru Ros, to have a look at if another forum user isn't able to help. Troubleshooting code like this can take quite a bit of time, so you might want to email us at our support page. We could pass it along to her for a look when she returns after the weekend.

I did have a look at the way the way the columns move and made a video where you can "just" see the top image stumble before going 100% as the viewing window is decreased. I hope that might help, Tweedskin! Thanks!


JD
Campaign Monitor Support
Tweedskin Tweedskin, 2 years ago

Thanks JD!

In a browser (and iOS), all seems to work well, as both will read the CSS media queries. It's just Gmail android app where the problem is....funnily enough it works ok on Gmail on a Galaxy S3 but not on the nexus 5.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098