Hi everyone!

I am running into an issue with my media queries. I am trying to do something pretty simple. The whole email is an image (just for previewing purposes), and once it reaches a certain width, it should switch to the mobile version. The media queries aren't working at all when I send a test in Litmus builder: https://litmus.com/builder/documents/3403305, nor my inbox. Am I missing something? I know Gmail is notorious for removing media queries, but I'd love to know if there is a workaround for this.

Thanks in advance! Here is my code:


<!DOCTYPE html>
<html>
  <!--HEX CODE: #5EB3B7 -->
  <head>
    <meta charset="UTF-8" />
    <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato:Lato:300,400,900"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto"
      rel="stylesheet"
    />

    <style type="text/css">
      html,
      body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
      }
      body,
      #bodyTable,
      #bodyCell {
        padding: 10px;
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      /* What it does: Stops email clients resizing small text. */
      * {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }
      /* What it does: Forces Outlook.com to display emails full width. */
      .ExternalClass {
        width: 100%;
      }
      /* What is does: Centers email on Android 4.4 */
      div[style*="margin: 0px 0"] {
        margin: 0 !important;
      }
      /* What it does: Stops Outlook from adding extra spacing to tables. */
      table,
      td {
        mso-table-lspace: 0pt !important;
        mso-table-rspace: 0pt !important;
      }
      /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
      table {
        border-spacing: 0 !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        margin: 0 auto !important;
      }
      table table table {
        table-layout: auto;
      }
      /* What it does: Uses a better rendering method when resizing images in IE. */
      img {
        -ms-interpolation-mode: bicubic;
        text-decoration: none;
        border: none;
      }
      a img {
        border: 0px;
      }
      /* What it does: Overrides styles added when Yahoo's auto-senses a link. */
      .yshortcuts a {
        border-bottom: none !important;
      }
      /* What it does: Another work-around for iOS meddling in triggered links. */
      a[x-apple-data-detectors] {
        color: inherit !important;
      }
      .mcnButtonContent {
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
      }
      .mcnButtonContent:hover {
        background-color: #dddddd;
        color: black;
      }
    </style>
    <!-- Progressive Enhancements -->
    <style type="text/css">
      /* What it does: Hover styles for buttons */
      .button-td,
      .button-a {
        transition: all 150ms ease-in;
        color: #f5f5f5;
      }
      .button-td:hover,
      .button-a:hover {
        opacity: 0.65 !important;
        border-color: #5eb3b7 !important;
        color: #ffffff !important;
      }
      .web-image {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      .mobile-image {
        display: none !important;
      }
      /* Media Queries */
      @media screen and (max-width: 580px) {
        .email-container {
          width: 100% !important;
        }
        .web-image {
          display: none;
        }
        .mobile-image {
          display: block !important;
          margin-left: auto;
          margin-right: auto;
        }
        /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
        .fluid,
        .fluid-centered {
          max-width: 100% !important;
          height: auto !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }
        /* And center justify these ones. */
        .fluid-centered {
          margin-left: auto !important;
          margin-right: auto !important;
        }
        /* What it does: Forces table cells into full-width rows. */
        .stack-column,
        .stack-column-center {
          display: block !important;
          width: 100% !important;
          max-width: 100% !important;
          direction: ltr !important;
        }
        /* And center justify these ones. */
        .stack-column-center {
          text-align: center !important;
        }
        /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
        .center-on-narrow {
          text-align: center !important;
          display: block !important;
          margin-left: auto !important;
          margin-right: auto !important;
          float: none !important;
        }
        table.center-on-narrow {
          display: inline-block !important;
        }
        #templateFooter .mcnTextContent,
        #templateFooter .mcnTextContent p {
          /*@editable*/
          color: #656565;
          /*@editable*/
          font-family: "Lato", sans-serif;
          /*@editable*/
          font-size: 12px;
          /*@editable*/
          line-height: 150%;
          /*@editable*/
          text-align: center;
          background-color: #ffffff;
        }
      }
    </style>
  </head>
  <!-- Content -->
  <body bgcolor="#ffffff" width="100%" style="margin: 0;">
    <!--[if mso]>
      <style type="text/css">
        body,
        a,
        table,
        td {
          font-family: Arial, Helvetica, sans-serif !important;
        }
      </style>
    <![endif]-->
    <table
      width="600"
      border="0"
      align="center"
      cellpadding="0"
      cellspacing="0"
      id="bodyTable"
      style="background-color:#ffffff; height:100%; width:100%"
    >
      <tbody>
        <tr>
          <td align="center" id="bodyCell" style="vertical-align:top">
            <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>
            <center>
              <!-- Logo -->
              <table
                cellspacing="0"
                cellpadding="0"
                border="0"
                align="center"
                bgcolor="#ffffff"
                width="600"
                class="email-container"
              >
                <tbody>
                  <!-- Logo END --><!-- Promo Code -->

                  <!-- Hero Image -->

                  <tr>
                    <td
                      style="background-color: #FFFFFF; text-align: center;  font-weight: bold;  padding-bottom: 0px; mso-height-rule: exactly; color: #FFFFFF; letter-spacing: 1px;"
                    >
                      <a target="_blank" href="https://eat.chownow.com/"
                        ><img
                          class="web-image"
                          src="https://d2axdqolvqmdvx.cloudfront.net/dc20db17-1036-4a29-a173-ab11587bc764/Halloween_Mockup_App2.png"
                          width="600"
                          alt="Happy Halloween"
                          border="0"
                          align="center"
                          style="text-align: center; width: 100%; max-width: 600px;"
                      /></a>
                    </td>
                  </tr>

                  <!--[if mso]>
  <div style="display: none;">
  <![endif]-->
                  <tr>
                    <td
                      style="background-color: #ffffff; text-align: center;  font-weight: bold;  padding-bottom: 0px; mso-height-rule: exactly; color: #FFFFFF; letter-spacing: 1px;"
                    >
                      <a target="_blank" href="https://eat.chownow.com/"
                        ><img
                          class="mobile-image"
                          src="https://d2axdqolvqmdvx.cloudfront.net/1d7c469e-d993-4cc2-b587-e5f5b1ed1809/Halloween_MobileMockUp_App2.png"
                          width="600"
                          alt="Happy Halloween"
                          border="0"
                          align="center"
                          style=""
                      /></a>
                    </td>
                  </tr>

                  <!--[if mso]>
            </div>
            <![endif]-->
                  <tr>
                    <td
                      class="text-footer"
                      style="padding-top: 20px; padding-left: 30px; padding-right: 30px; padding-bottom: 0px; color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:10px; line-height:15px; text-align:center;"
                    >
                      Offer valid on one order through the [ Restaurant Name ]
                      website or mobile app for a limited time only.
                      <br />
                      &copy; [ Restaurant Name ]. [ LocationAddress ]. 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:#0b2135;"
                        ><span
                          class="link-u t-black"
                          style="text-decoration:underline; color:#0b2135;"
                          >unsubscribe here</span
                        ></a
                      >. <br /><br /><br />

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

                  <!-- Hero Image END -->
                </tbody>
              </table>
              <!-- Content END -->
            </center>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>