title: CSS media query not working in HTML email
body: <p>When I build an email I use media queries for adjusting the style for smartphones. The problem is if I look at the .html file on the browser everything is working fine, but when I send a test mail to my phone every style that's set within the media query is gone.</p>
  <p>The code:</p>
  <pre><code>    @media only screen and (max-width:768px) {
      * {
         background-color: red; (for testing)
      }
      body &gt; div &gt; div &gt; table &gt; tbody &gt; tr &gt; td {
          padding: 10px !important;
      }
      .image {
          margin: 15px 0 !important;
      }
      .footer-icon-container {
          width: 75px !important;
      }
      .title {
          padding: 10px 0px !important;
      }
      .avatar &gt; table &gt; tbody &gt; tr &gt; td {
          padding: 40px 0 0 30px !important;
      }
      .sub-title &gt; table &gt; tbody &gt; tr &gt; td {
          padding-left: 20px !important;
          padding-right: 20px !important;
      }
  }
  </code></pre>
  <p>Can somebody explain to me what I am doing wrong and what I can try to fix it? I test the email on the newest version of Gmail on Android 10 on an OnePlus 8 if that helps.</p>