Html email looking different in Gmail app

Question

I'm not really used to making html emails. Of course I have to start out making a responsive one in basically two versions of the same email. When I thought I had it done for most clients I realised that gmail app for both android and iOS gave the email a third look. I have read the gmail strips out the header section but even if I try to style it inline gmail app still makes the third look. Links to images in comment below shows how mobile should look and gmail app look. The trouble is where I have three columns that should turn into one moving the image to the left and header and text to the right (like mobile image). Gmail app shows the image, header and text on each their line. It should - at best - look like the mobile or at least look like the desktop version.

Any help is appreciated.

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style type="text/css">


            .ReadMsgBody {width: 100%; background-color: #ffffff;}
            .ExternalClass {width: 100%; background-color: #ffffff;}
            body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: Georgia, Times, serif}
            table {border-collapse: collapse;}
            table td { border-collapse: collapse; } 
            h2, p {margin: 0;}
            h2 {padding-top: 15px;}
            .img, .text {display: block;}
            body .deviceWidth {width: 680px}
            @media only screen and (max-width: 640px)  {
                body .deviceWidth {width: 440px!important; padding:0;}  
                body .center {text-align: center!important;}
                table.triplet {width: 99% !important; padding-bottom: 20px !important;}
                .noPadding {padding-left: 0!important;}
                .img, .text {width: 50%;}
                .text p {padding-right: 20px;}
                h2 {padding-top: 0!important;}
            }

            @media only screen and (max-width: 479px) {
                body .deviceWidth {width: 300px!important; padding:0;}  
                body .center {text-align: center!important;}
                .img img {width: 140px;}
            }
        </style>
        <!-- Targeting Windows Mobile -->
        <!--[if IEMobile 7]>
        <style type="text/css">

        </style>
        <![endif]-->
    </head> 
    <body bgcolor="#ffffff" style="font-family: Georgia, Times, serif">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;">
                    <table class="container deviceWidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">

                        <tr>
                            <td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="deviceWidth">
                                <img src="http://placehold.it/680x300" class="deviceWidth" border="0" alt="">
                                <h1 align="left">Header 1</h1>
                                <p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </td>
                        </tr>

                        <tr>
                            <td class="deviceWidth" style="padding: 0;" width="700">
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 1</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 2</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->

                                        </td>
                                    </tr>
                                </table>
                                <table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
                                            <!--[if IE]>
                                              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                  <td>
                                            <![endif]-->
                                            <table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                <tr>
                                                <td>
                                            <![endif]-->
                                            <table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <h2>Offer 3</h2>
                                                        <p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if IE]>
                                                </td>
                                                </tr>
                                                </table>
                                            <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>


                    </table>
                </td>
            </tr>
        </table>
    </body> 
</html>

[Desktop image](https://dl.dropboxusercontent.com/u/1507739/stack/desktop.jpg) [Mobile image](https://dl.dropboxusercontent.com/u/1507739/stack/mobile.jpg) [Gmail image](https://dl.dropboxusercontent.com/u/1507739/stack/gmail.jpg) — Sivle, Mar 24 '14 at 16:00
The Gmail app tends to zoom into "random" parts of the email. I'm sure there's nothing random about it and further investigation could reveal when and why it happens, but it doesn't change the fact that it does. In doing so, some elements are enlarged while others are kept at the same size. (Breaking layouts or forcing content to be on different rows.) One way around it is to add `min-width:xxx` to a full-width `td` of your email and have it equal to the full, desktop size. For some reason, `width` isn't enough for Gmail. You'll have to overwrite it in your media query for responsive devices. — Narong, Jul 01 '14 at 19:14

John · Answer 1 · 2014-03-25T15:18:05.510

When you use align="left" on the tables, it is like floating left in CSS. This is what Gmail is doing, it is floating your text table, causing it to overflow (pop down) below your image table.

If you want your text within the tables to align, put it in the <td> within those tables instead.

Update:

For responsive in html email, try using the display:block; toggle technique:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>

This will be ignored by Gmail as it strips the style tag, leaving the default non-responsive layout.

If I remove align=left the tables still sit on top of each other. I need them to be next to each other like in the mobile image or stay all three columns next to each other like the desktop version. — Sivle, Mar 25 '14 at 12:05
You're right. You should have them in ``'s and toggle the `display:block;` on the `` to control the flow. — John, Mar 25 '14 at 15:07
Newer Android devices will not obey `display:block` on `TD` elements. It seems that the only way we can achieve a responsive email for said devices is to use aligned tables. — Narong, Jul 01 '14 at 19:11

Html email looking different in Gmail app

1 Answers1

Linked