Hey all,

I'm a designer working on a new responsive email template for my company. I used this template as a boiler plate and worked in our branding, layout and content around that.

I was able to make it work with 99% of clients, but unfortunately, after much tweaking and testing in Litmus, I just couldn't get it to render correctly in both the iOS and Android Gmail app. It would either display mobile or desktop properties, and would disregard common styling entirely, breaking the layout.

I tried a bunch of hotfixes and custom classes, including this one, which should handle the img tag scaling issue for but to no avail.

Let me know of any suggestions or recommendations, I'm all ears! Code is below:

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Golfshot Pro</title>
    <style type="text/css">
        .ReadMsgBody {
            width: 100%;
            background-color: #e4e4e4;
        }
        .ExternalClass {
            width: 100%;
            background-color: #e4e4e4;
        }
        body {
            width: 100%;
            background-color: #e4e4e4;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            font-family: 'Helvetica Neue',sans-serif;
        }
        table {
            border-collapse: collapse;
        }
        @media only screen and (max-width: 640px) {
            body[yahoo] .deviceWidth {
                width: 440px !important;
                padding: 0;
            }
            body[yahoo] .center {
                text-align: center !important;
            }
        }
        @media only screen and (max-width: 479px) {
            body[yahoo] .deviceWidth {
                width: 320px !important;
                padding: 0;
            }
            body[yahoo] .center {
                text-align: center !important;
            }
        }
    </style>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: 'Helvetica Neue',sans-serif;width: 100%;background-color: #e4e4e4;margin: 0;padding: 0;-webkit-font-smoothing: antialiased;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse;">
        <tr>
            <td width="100%" valign="top" bgcolor="#e4e4e4" style="padding-top:20px">
                <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse;">
                    <tr>
                        <td width="100%" bgcolor="#ffffff">
                            <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse;">
                                <tr>
                                    <td style="padding:30px 30px; display:block;">
                                        <a href="https://golfshotgps.com/" target="_blank"><img src="https://szmail.s3.amazonaws.com/2015-05-07-golfshot-pro-US-renewal-1/logo.jpg" alt="Golfshot" border="0" width="125" height="37" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="border-collapse: collapse;">
                    <tr>
                        <td valign="top" style="padding:0; display:block;" bgcolor="#ffffff">
                            <a href="#" target="_blank"><img class="deviceWidth" src="https://szmail.s3.amazonaws.com/2015-05-07-golfshot-pro-US-renewal-1/banner.jpg" alt="Golfshot Pro for Only $19.99" border="0" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 15px; color: #363636; font-weight: normal; text-align: left; font-family: 'Helvetica Neue',sans-serif; line-height: 25px; vertical-align: top; padding:30px 30px 30px 30px" bgcolor="#ffffff">
                            Hi [FirstName],
                            <br /><br />
                            Your Golfshot Pro subscription expired in [Month] and with golf season in full swing, we want you to <b>come back to Pro</b> for <a href="#" target="_blank" style="font-family: 'Helvetica Neue',sans-serif; font-size: 15px; color: #057aa9; text-decoration:none;">only $19.99*</a> today!
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="border-collapse: collapse;">
                    <tr>
                        <td>
                            <table width="540" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="border-collapse: collapse;">
                                <tr>
                                    <td>
                                        <table width="100%" align="center" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                                            <tr>
                                                <td align="center" width="100%" height="50" bgcolor="#50a2c3" style="color: #ffffff; border-bottom: 3px solid #057aa9; display: block;">
                                                    <a href="#" target="_blank" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:50px; width:100%; display:inline-block">
                                                        <span style="color: #ffffff;">
                                                            Get Back in the Swing for $19.99
                                                        </span>
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 15px; color: #363636; font-weight: normal; text-align: left; font-family: 'Helvetica Neue',sans-serif; line-height: 25px; vertical-align: top; padding:30px 30px 30px 30px" bgcolor="#ffffff">
                            Pro members enjoy <b>$20 off</b> a Hot Deal** tee time from GolfNow. Combine your $20 off code with up to <b>80%</b> savings on Hot Deal tee times, and it’s like we’re paying you to play this golf season.
                        </td>
                    </tr>
                </table>
                <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#f6fafb" style="border-collapse: collapse;">
                    <tr>
                        <td style="padding:0; border-bottom: 1px solid #e4e4e4;">
                            <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="border-collapse: collapse;">
                                <tr>
                                    <td style="font-size: 15px; color: #363636; font-weight: normal; text-align: left; font-family: 'Helvetica Neue',sans-serif; line-height: 25px; vertical-align: top; padding:0px 0px 0px 0px">
                                        <table style="border-collapse: collapse;">
                                            <tr>
                                                <td valign="top" style="padding:40px 0px 0px 30px; display:block;">
                                                    <img src="https://szmail.s3.amazonaws.com/2015-05-07-golfshot-pro-US-renewal-1/tee-times-title.jpg" alt="Book Tee Times" border="0" width="270" height="48" align="left" />
                                                </td>
                                            </tr>
                                        </table>
                                        <p style="padding:0px 0px 0px 30px; mso-table-lspace:0;mso-table-rspace:0; margin:0">
                                            Search, book, and save up to 80% on tee times powered by GolfNow
                                        </p>
                                    </td>
                                </tr>
                            </table>
                            <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="border-collapse: collapse;">
                                <tr>
                                    <td valign="top" align="center" class="center" style="padding-top:30px; display:block;">
                                        <img width="267" src="https://szmail.s3.amazonaws.com/2015-05-07-golfshot-pro-US-renewal-1/tee-times.jpg" alt="Book Tee Times" border="0" style="width: 267px; display: block;" class="deviceWidth" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#f6fafb" style="border-collapse: collapse;">
                    <tr>
                        <td style="padding:0;">
                            <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="border-collapse: collapse;">
                                <tr>
                                    <td style="font-size: 15px; color: #363636; font-weight: normal; text-align: left; font-family: 'Helvetica Neue',sans-serif; line-height: 25px; vertical-align: top; padding:0px 0px 0px 0px">
                                        <table style="border-collapse: collapse;">
                                            <tr>
                                                <td valign="top" style="padding:40px 0px 0px 30px; display:block;">
                                                    <img src="https://szmail.s3.amazonaws.com/2015-05-07-golfshot-pro-US-renewal-1/watch-title.jpg" alt="Book Tee Times" border="0" width="270" height="48" align="left" />
                                                </td>
                                            </tr>
                                        </table>
                                        <p style="padding:0px 0px 0px 30px; mso-table-lspace:0;mso-table-rspace:0; margin:0">
                                            Get distances, score and track shots right on Apple Watch and Android Wear&#8482;.
                                        </p>
                                    </td>
                                </tr>
                            </table>
                            <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="border-collapse: collapse;">
                                <tr>
                                    <td valign="top" align="center" class="center" style="padding-top:30px; display:block;">
                                        <img width="267" src="https://szmail.s3.amazonaws.com/2015-05-07-golfshot-pro-US-renewal-1/watch.jpg" alt="Book Tee Times" border="0" style="width: 267px; display: block;" class="deviceWidth" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 15px; color: #363636; font-weight: normal; text-align: left; font-family: 'Helvetica Neue',sans-serif; line-height: 25px; vertical-align: top; padding:30px 30px 30px 30px" bgcolor="#ffffff">
                            Save strokes and save money all season. This offer, like the golf season, won’t last forever. <b>Get back to the top</b> of your game now.
                            <br /><br />
                            Sincerely,<br />
                            <b>The Shotzoom Team</b><br />
                            Rate Golfshot on <a href="https://itunes.apple.com/us/app/id622851626?ls=1&mt=8" target="_blank" style="font-family: 'Helvetica Neue',sans-serif; font-size: 15px; color: #057aa9; text-decoration:none;">App Store</a> or <a href="https://play.google.com/store/apps/details?id=com.shotzoom.golfshot2" target="_blank" style="font-family: 'Helvetica Neue',sans-serif; font-size: 15px; color: #057aa9; text-decoration:none;">Google Play</a>
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 13px; color: #767676; font-weight: normal; text-align: left; font-family: 'Helvetica Neue',sans-serif; line-height: 23px; vertical-align: top; padding:0px 30px 30px 30px" bgcolor="#ffffff">
                            * Promotional pricing of $19.99 is valid for a 1-year membership of Golfshot Pro. Our standard renewal rate of $29.99 applies after 1 year.<br />
                            ** Promo code is only valid on one Hot Deal tee time and may not be combined with other promo codes.
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#e4e4e4" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 13px; color: #4e4e4e; font-weight: normal; text-align: center; font-family: 'Helvetica Neue',sans-serif; line-height: 23px; vertical-align: top; padding:30px 30px 30px 30px" bgcolor="#e4e4e4">
                            <a href="https://shotzoom.com/contact" target="_blank" style="color:#4e4e4e; text-decoration:none;" accesskey="7">Contact Us</a> &#8226; <a href="[Unsubscribe]" target="_blank" style="color:#4e4e4e; text-decoration:none;" accesskey="8">Unsubscribe</a> &#8226; &#169;2015 <a href="https://shotzoom.com" target="_blank" style="color:#4e4e4e; text-decoration:none;" accesskey="8">Shotzoom</a>
                        </td>
                    </tr>
                </table>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#e4e4e4" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 9px; color: #4e4e4e; font-weight: normal; text-align: center; font-family: 'Helvetica Neue',sans-serif; line-height: 13px; vertical-align: top; padding:0px 30px 30px 30px" bgcolor="#e4e4e4">
                            Apple, the Apple logo and iPhone are trademarks of Apple Inc., registered in the U.S. and other countries.<br />
                            App Store is a service mark of Apple Inc. / Google Play is a trademark of Google Inc.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </body>
    </html>
    ```