Home Table is responsive on Outlook but is not in Gmail
Reply: 1

Table is responsive on Outlook but is not in Gmail

nunof
1#
nunof Published in 2018-02-14 09:47:55Z

I had a three tables that I want to be responsive when view the email on mobile or tablet. On desktop they showed like 3 columns and I want on mobile they show as one column.

The problem is on Gmail it is showing like 3 columns and Outlook it is show like one column.

I don't know if is an bug on code or if Gmail don't recognize some style.

 @media only screen and (max-width: 480px) {
           table[class=devicewidthinner-full] {background-color: #ccc !important; width: 100%!important;text-align:center!important;}
           img[class=banner] {width: 280px!important;height:140px!important;}
           img[class=colimg2] {width: 280px!important;height:140px!important;}
           td[class=mobile-hide]{display:none!important;}
           td[class="padding-bottom25"]{padding-bottom:25px!important;}
 }
<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full" style="background-color: #ccc;">
 <tbody>
    <!-- image 2 -->
    <tr>
       <td width="100%" align="center" class="devicewidth"><a href="#"><img src="#" alt="" border="0" width="186" height="130" style="display:block; border:none; outline:none; text-decoration:none;"></a>
       </td>
    </tr>
    <!-- end of image2 -->
    <tr>
       <td>
          <!-- start of text content table -->  
          <table width="186" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
             <tbody>
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- title2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;" st-title="3col-title1">
                      Lorem Ipsum
                   </td>
                </tr>
                <!-- end of title2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- content2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;" st-content="3col-content1">
                      Lorem Ipsum 
                   </td>
                </tr>
                <!-- end of content2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- read more -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8;  text-align:center; line-height: 20px;" st-title="3col-readmore1" class="padding-bottom25">
                      <a href="#" style="text-decoration: none; color: #FF5500;">Here</a>
                   </td>
                </tr>
                  <tr>
                   <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
               </tr>
                <!-- end of read more -->
             </tbody>
          </table>
       </td>
    </tr>
    <!-- end of text content table -->
 </tbody>
</table>

<table width="20" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
   <tbody>
      <tr>
         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
      </tr>
   </tbody>
</table>

<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full" style="background-color: #ccc;">
 <tbody>
    <!-- image 2 -->
    <tr>
       <td width="100%" align="center" class="devicewidth"><a href="#"><img src="#" alt="" border="0" width="186" height="130" style="display:block; border:none; outline:none; text-decoration:none;"></a>
       </td>
    </tr>
    <!-- end of image2 -->
    <tr>
       <td>
          <!-- start of text content table -->  
          <table width="186" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
             <tbody>
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- title2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;" st-title="3col-title1">
                      Lorem Ipsum
                   </td>
                </tr>
                <!-- end of title2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- content2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;" st-content="3col-content1">
                      Lorem Ipsum 
                   </td>
                </tr>
                <!-- end of content2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- read more -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8;  text-align:center; line-height: 20px;" st-title="3col-readmore1" class="padding-bottom25">
                      <a href="#" style="text-decoration: none; color: #FF5500;">Here</a>
                   </td>
                </tr>
                  <tr>
                   <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
               </tr>
                <!-- end of read more -->
             </tbody>
          </table>
       </td>
    </tr>
    <!-- end of text content table -->
 </tbody>
</table>

<table width="20" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
   <tbody>
      <tr>
         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
      </tr>
   </tbody>
</table>

<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full" style="background-color: #ccc;">
 <tbody>
    <!-- image 2 -->
    <tr>
       <td width="100%" align="center" class="devicewidth"><a href="#"><img src="#" alt="" border="0" width="186" height="130" style="display:block; border:none; outline:none; text-decoration:none;"></a>
       </td>
    </tr>
    <!-- end of image2 -->
    <tr>
       <td>
          <!-- start of text content table -->  
          <table width="186" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
             <tbody>
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- title2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;" st-title="3col-title1">
                      Lorem Ipsum
                   </td>
                </tr>
                <!-- end of title2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- content2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;" st-content="3col-content1">
                      Lorem Ipsum 
                   </td>
                </tr>
                <!-- end of content2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- read more -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8;  text-align:center; line-height: 20px;" st-title="3col-readmore1" class="padding-bottom25">
                      <a href="#" style="text-decoration: none; color: #FF5500;">Here</a>
                   </td>
                </tr>
                  <tr>
                   <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
               </tr>
                <!-- end of read more -->
             </tbody>
          </table>
       </td>
    </tr>
    <!-- end of text content table -->
 </tbody>
</table>

Syfer
2#
Syfer Reply to 2018-02-14 22:52:00Z

The issue is with the media query. Gmail has stopped supporting class selectors sometime ago. If you change your media query as below it will work. I have tested the below code in Gmail app (v8.1.7) but it should work with any release after November last year.

@media only screen and (max-width:480px) {
           .devicewidthinner-full {background-color: #ccc !important; width: 100%!important;text-align:center!important;}
           .banner {width: 280px!important;height:140px!important;}
          .colimg2 {width: 280px!important;height:140px!important;}
           .mobile-hide{display:none!important;}
           .padding-bottom25{padding-bottom:25px!important;}
 }
<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full" style="background-color: #ccc;">
 <tbody>
    <!-- image 2 -->
    <tr>
       <td width="100%" align="center" class="devicewidth"><a href="#"><img src="#" alt="" border="0" width="186" height="130" style="display:block; border:none; outline:none; text-decoration:none;"></a>
       </td>
    </tr>
    <!-- end of image2 -->
    <tr>
       <td>
          <!-- start of text content table -->  
          <table width="186" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
             <tbody>
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- title2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;" st-title="3col-title1">
                      Lorem Ipsum
                   </td>
                </tr>
                <!-- end of title2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- content2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;" st-content="3col-content1">
                      Lorem Ipsum 
                   </td>
                </tr>
                <!-- end of content2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- read more -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8;  text-align:center; line-height: 20px;" st-title="3col-readmore1" class="padding-bottom25">
                      <a href="#" style="text-decoration: none; color: #FF5500;">Here</a>
                   </td>
                </tr>
                  <tr>
                   <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
               </tr>
                <!-- end of read more -->
             </tbody>
          </table>
       </td>
    </tr>
    <!-- end of text content table -->
 </tbody>
</table>

<table width="20" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
   <tbody>
      <tr>
         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
      </tr>
   </tbody>
</table>

<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full" style="background-color: #ccc;">
 <tbody>
    <!-- image 2 -->
    <tr>
       <td width="100%" align="center" class="devicewidth"><a href="#"><img src="#" alt="" border="0" width="186" height="130" style="display:block; border:none; outline:none; text-decoration:none;"></a>
       </td>
    </tr>
    <!-- end of image2 -->
    <tr>
       <td>
          <!-- start of text content table -->  
          <table width="186" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
             <tbody>
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- title2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;" st-title="3col-title1">
                      Lorem Ipsum
                   </td>
                </tr>
                <!-- end of title2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- content2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;" st-content="3col-content1">
                      Lorem Ipsum 
                   </td>
                </tr>
                <!-- end of content2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- read more -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8;  text-align:center; line-height: 20px;" st-title="3col-readmore1" class="padding-bottom25">
                      <a href="#" style="text-decoration: none; color: #FF5500;">Here</a>
                   </td>
                </tr>
                  <tr>
                   <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
               </tr>
                <!-- end of read more -->
             </tbody>
          </table>
       </td>
    </tr>
    <!-- end of text content table -->
 </tbody>
</table>

<table width="20" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
   <tbody>
      <tr>
         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
      </tr>
   </tbody>
</table>

<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full" style="background-color: #ccc;">
 <tbody>
    <!-- image 2 -->
    <tr>
       <td width="100%" align="center" class="devicewidth"><a href="#"><img src="#" alt="" border="0" width="186" height="130" style="display:block; border:none; outline:none; text-decoration:none;"></a>
       </td>
    </tr>
    <!-- end of image2 -->
    <tr>
       <td>
          <!-- start of text content table -->  
          <table width="186" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner-full">
             <tbody>
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- title2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;" st-title="3col-title1">
                      Lorem Ipsum
                   </td>
                </tr>
                <!-- end of title2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- content2 -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;" st-content="3col-content1">
                      Lorem Ipsum 
                   </td>
                </tr>
                <!-- end of content2 -->
                <!-- Spacing -->
                <tr>
                   <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <!-- Spacing -->
                <!-- read more -->
                <tr>
                   <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8;  text-align:center; line-height: 20px;" st-title="3col-readmore1" class="padding-bottom25">
                      <a href="#" style="text-decoration: none; color: #FF5500;">Here</a>
                   </td>
                </tr>
                  <tr>
                   <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
               </tr>
                <!-- end of read more -->
             </tbody>
          </table>
       </td>
    </tr>
    <!-- end of text content table -->
 </tbody>
</table>

Let me know if you have issues.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.312511 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO