Hi everyone!

I am testing one of our templates on Litmus as well as live testing on real devices, and I noticed something weird on the Litmus end. The Gmail renderings don't look good on the Litmus builder: https://litmus.com/checklist/emails/public/a2f94d5#gmailios, however, they look just fine on the live devices I tested (iPhone 8 Plus, iPhone 7, Gmail on Mac, and Samsung S9).
Here's the code:


<!--HEX CODE 1: #0b2135-->

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="date=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x-apple-disable-message-reformatting" />
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Roboto:300,300i,400,400i,700,700i" rel="stylesheet"/>
    <!--<![endif]-->
    <!--[if gte mso 9]>
    <style type="text/css" media="all">
        sup { font-size: 100% !important; }
    </style>
    <![endif]-->


    <style type="text/css" media="screen">
        body { padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none }
        a { color:#0b2135; text-decoration:none }
        p { padding:0 !important; margin:0 !important } 
        img { -ms-interpolation-mode: bicubic; }
        .mcnPreviewText { display: none !important; }

        .web-image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: auto !important;
      }
      .mobile-image {
        display: none;
      }
      .text-footer {
          font-size:11px;

      }
      .subhead {
        font-size:18px;
      }
      .promo {
        font-size:18px;
      }

        .text-btn-a { display: block; 
            }

        .link-white a { color: #ffffff !important; }
        .link-black a { color: #0b2135 !important; }

        .link-block { display: block; }

        .text-btn-td
        .text-btn-a {
            transition: all 150ms ease-in;
            color: #FFFFFF;
            border: 2px solid #c0353f; border-radius: 3px;
        }
        .text-btn-td:hover
        .text-btn-a:hover {
            opacity: 0.65 !important;
            border-color: #c0353f !important;
            color: #ffffff !important;
            border: 2px solid #c0353f; border-radius: 3px;
        }
        .header {
        font-size: 38px;
        line-height: 50px;
        color: #000000;
        font-weight: 700;
        letter-spacing: 4px;
        text-align: center !important;
        }
        .apps {
            font-size:20px; 
            line-height: 29px;
        }
        .hide  {
            display: none; 
        }

        @media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
            u + .body .gwfw { width: 100% !important; width: 100vw !important; }
        .apps {
            font-size:16px; 
            line-height: 20px;
        }
        .desktop-show {
            display: initial;
        }
        .web-image {
          display: none !important;
        }
        .mobile-image {
          display: block !important;
          margin-left: auto;
          margin-right: auto;
          height: auto;
        }
        .text-footer {
        font-size: 12px !important;
        padding-left: 20px;
        padding-right: 20px;
        }
        .header {
            font-size: 33px !important;
          line-height: 40px;
        }
        .subhead {
            font-size: 22px !important;
        }
        .promo {
            font-size: 20px !important;
        }
            .td,
            .m-shell { width: 100% !important; min-width: 100% !important; }

            .m-td,
            .m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }

            .m-block { display: block !important; }

            .fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; }

            .column,
            .column-top { float: left !important; width: 100% !important; display: block !important; }

            .content-spacing { width: 15px !important; }

            .m-bg { height: auto !important; background-position: center center !important; background-size: cover !important; }

            .mt-left { text-align: left !important; }
            .mt-center { text-align: center !important; }
            .mt-right { text-align: right !important; }

            .me-left { margin-right: auto !important; }
            .me-center { margin: 0 auto !important; }
            .me-right { margin-left: auto !important; }

            .h-auto { height: auto !important; }
            .w-auto { width: auto !important; }
            .w-full { width: 100% !important; }

            .w-2 { width: 2% !important; }
            .w-32 { width: 32% !important; }
            .w-49 { width: 49% !important; }

            .p-0 { padding: 0 !important; }
            .p-15 { padding: 15px !important; }

            .plr-0 { padding-left: 0 !important; padding-right: 0 !important; }
            .plr-15 { padding-left: 15px !important; padding-right: 15px !important; }
            .plr-30 { padding-left: 30px !important; padding-right: 30px !important; }

            .ptb-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
            .ptb-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
            .ptb-30 { padding-top: 30px !important; padding-bottom: 30px !important; }

            .pb-0 { padding-bottom: 0 !important; }
            .pb-1 { padding-bottom: 1px !important; }
            .pb-5 { padding-bottom: 5px !important; }
            .pb-10 { padding-bottom: 10px !important; }
            .pb-15 { padding-bottom: 15px !important; }
            .pb-20 { padding-bottom: 20px !important; }
            .pb-25 { padding-bottom: 25px !important; }
            .pb-30 { padding-bottom: 30px !important; }
        }
    </style>
</head>
<body class="body" style="padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#F9F9F9; -webkit-text-size-adjust:none;">
    <div
    style="display: none; max-height: 0px; overflow: hidden;"
  >
    &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
    &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
    &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
    &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
    &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
    ‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
    &nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌
  </div>
    <!--[if !gte mso 9]><!-->
    <span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <!--<![endif]-->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f9f9f9" class="gwfw">
        <tr>
            <td align="center" valign="top">
                <table width="620" border="0" cellspacing="0" cellpadding="0" class="m-shell">
                    <tr>
                        <td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="padding: 10px;">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <!-- Container -->
                                            <tr>
                                                <td bgcolor="#FFFFFF">
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                        <!-- Logo -->
                                                        <tr>
                                                            <td class="img-center plr-15" style="padding-top: 40px; padding-left: 0px; padding-right: 0px; padding-bottom: 30px; font-size:0pt; line-height:0pt; text-align:center;">
                                                                <a href="https://hudsonscafe.com/" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/e2ecc17d-a770-406e-bd9e-bbbd75d9a6b5/Hudsons_logo2x.png" width="150" border="0" alt="Logo"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a>
                                                            </td>
                                                        </tr>
                                                        <!-- END Logo -->

                                                        <!-- Main -->
                                                        <tr>
                                                            <td class="plr-15" style="padding: 20px 0px 0px 0px;">
                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                                                    <tr>
                                                                        <td align="center" class="header" style="line-height: 50px; padding-bottom: 15px; font-family:'Lato', Arial, sans-serif;  text-align:center; color:#0b2135;">
                                                                            <strong>SAY HELLO TO<br />
                                                                                OUR NEW </strong>
                                                                                </strong>
                                                                                    <strong class="header" style="color:#bf1e2c;"
                                                                                        >APP</strong>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="subhead" style="padding-bottom: 40px; font-family:'Lato', Arial, sans-serif; padding-top: 10px; line-height:27px; text-align:center; letter-spacing: 0.13px; color:#0b2135;">
                                                                            Best Prices. Easy Ordering.<br />
                                                                            Speedy Checkout. <strong>Extra Delicious.</strong>
                                                                        </td>
                                                                    </tr>

                                                                     <!-- Button -->
              <tr>
                <td
                  align="center"
                  style="padding-bottom:5px; padding-left:18px; padding-right:18px; padding-top:0px; vertical-align:top"
                  class="mcnButtonBlockInner"
                >
                  <table
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    style="border-collapse:separate !important"
                    class="mcnButtonContentContainer"
                  >
                    <tbody>
                      <tr>
                        <td
                          align="center"
                          style="background-color:#bf1e2c; border-radius: 3px; font-family: 'Lato-Regular', sans-serif; font-size:12px; padding-bottom:15px; padding-left:25px; padding-right:25px; padding-top:15px; vertical-align:middle"
                          class="mcnButtonContent"
                        >
                          <a
                            title="ORDER NOW"
                            target="_blank"
                            style="background-color: #bf1e2c; font-family: 'Lato-Regular', sans-serif; font-size: 11px; font-weight: bold;letter-spacing: 2px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;"
                            class="downloadnow"
                            href="http://lksn.se/HudsonsCafe"
                            >DOWNLOAD NOW</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <!-- END Main -->

                                                        <!-- Image -->
                                                        <tr>
                                                            <td class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left;">
                                                                <a href="lksn.se/HudsonsCafe" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/8373843f-4b05-45f3-aa80-5fbbc6f87c9b/image2x.png" width="600" height="458" border="0" alt="Hero Image"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a>
                                                            </td>
                                                        </tr>
                                                        <!-- END Image -->
                                                    </table>
                                                </td>
                                            </tr>
                                            <!-- END Container -->
   <!-- Main -->
   <tr>
    <td bgcolor="#FFFFFF" class="plr-15" style="background-color: #FFFFFF;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">


            <tr>
                <td class="apps" style="line-height: 25px; letter-spacing: 1px; padding-top: 45px; padding-bottom: 25px; font-family:'Lato', Arial, sans-serif;  text-align:center; color:#0b2135;">
                    Enjoy 20% off your first mobile app order <br />with
                    code:
                    <strong style="color:#c22935; font-weight: 900"
                      >ORDERBETTER</strong
                    >
                </td>
            </tr>


        </table>
    </td>
</tr>
<!-- END Main -->
<tr>
<td align="center" style="background-color: #FFFFFF; padding-bottom: 35px; padding-top: 0px;">

<!-- Download -->
<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:center;"></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:center;">
    <div class="img-center" style="font-size:0pt; line-height:0pt; text-align:center;"><a href="itunes.apple.com/us/app/hudsons-cafe/id989353480?mt=8" target="_blank"><img class="text" src="https://gallery.mailchimp.com/11e239951f421df7d77233e18/images/3f004edb-6ded-4007-82ea-9ecc8b025828.png" border="0" width="110" height="33" alt="iOS-App" width="100%" style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a></div>
</td>
<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:center;"></td>



<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:center;"></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:center;">
    <div class="img-center" style="font-size:0pt; line-height:0pt; text-align:center;"><a href="play.google.com/store/apps/details?id=com.chownow.hudsonscafesales&hl=en_US" target="_blank"><img class="text" src="https://gallery.mailchimp.com/11e239951f421df7d77233e18/images/26f407b8-e2e1-4c1e-b26a-77c3228c071d.png" border="0" width="110" height="33" alt="Android-App"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a></div>
</td>
<td class="img" width="5" style="font-size:0pt; line-height:0pt; text-align:center;"></td>

</tr>
</table>
<!-- END Download -->
</td>
</tr>
                                            <!-- Footer -->
                                            <tr>
                                                <td style="padding-top: 20px;">
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <!-- ORDER BETTER -->

                                                        <tr>
                                                                <td class="web-image" style="font-size:0pt; line-height:0pt; text-align:left;">
                                                                    <a href="https://get.chownow.com/order-better?utm_source=partner_app_announcement&utm_medium=email&utm_content=footer" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/196576de-cee8-4d4d-991d-609b0497689e/OrderBetter_Footer2x.png" width="600" border="0" alt="Hero Image"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; width: 100%;" /></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                    <td class="mobile-image" style="font-size:0pt; line-height:0pt; text-align:left;">
                                                                        <a href="https://get.chownow.com/order-better?utm_source=partner_app_announcement&utm_medium=email&utm_content=footer" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/67920096-9e2e-4420-9976-e534f0ca65b0/Mobile_OrderBetter_Footer2x.png"  border="0" alt="Hero Image"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; width: 100%;" /></a>
                                                                    </td>
                                                                </tr>
                                                        <!-- END ORDER BETTER -->

                                                        <tr>
                                                            <td class="text-footer" style="padding-top: 20px; padding-left: 10px; padding-right: 10px;color:#757575; font-family:'Lato', Arial, sans-serif;  line-height:15px; text-align:center;">
                                                                Offer valid on one order through the Hudson's Cafe website for a limited time only.
                                                                <br />
                                                                &copy; Hudson's Cafe. 123 Sample City, Los Angeles, CA 90049. All Rights Reserved.
                                                                <br /><br />

                                                                Our records indicate we have your permission to send emails to this email address. If you&rsquo;d rather not receive future marketing emails from us, please <a href="{{ unsubscribeUrl }}" target="_blank" class="link-u t-black" style="text-decoration:underline; color:#757575;"><span class="link-u t-black" style="text-decoration:underline; color:#757575;">unsubscribe here</span></a>.
                                                                <br /><br />

                                                                <a href="{{ viewInBrowserUrl }}" target="_blank" class="link-u t-black" style="text-decoration:underline; color:#757575;"><span class="link-u t-black" style="text-decoration:underline; color:#757575;">View in browser</span></a><br/><br/><br/>
                                                            </td>
                                                        </tr>


                                                    </table>
                                                </td>
                                            </tr>
                                            <!-- END Footer -->
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Is this something I should be worried about? Should I trust the live tests over the Litmus renderings? I'd love to hear your thoughts.

Thanks!
Charlotte