title: Media queries not working on MailChimp
body: <p>I’m pretty new to CSS and I’m trying to add some customization to my MailChimp newsletters. My images have text so when I make them responsive and view them on mobile, the text is too small. I want to have 2 versions: 1 image that’s visible on desktop and a 2nd image that users on mobile will see. I’m using this code, and it’s working for my on my website, but not on MailChimp.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  
  @media only screen and (min-device-width: 0px)
    and (max-device-width: 720px) {div#banner {visibility:hidden;}}
    
    @media screen and (min-width: 0px) and (max-width: 720px) {
    #banner { display: none; }
    .mobile-hide{ display: none; }
  }
    
    
    @media (min-width: 721px)
      @media only screen
     {div#deskbanner {visibility:hidden;}}
    
    @media screen and (min-width: 721px) {
    #deskbanner { display: none; }
    .desk-hide{ display: none; }
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner" class="fb-like-box mobile-hide"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0073/8132/files/bangkok-traveling-tailor-trunk-show.jpg?606649028080735558" alt="Bangkok Traveling Tailor Trunk Show" style="max-width: 100%; height: auto;"/&gt;&lt;/div&gt;
  &lt;div id="deskbanner" class="fb-like-box desk-hide"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0073/8132/files/bangkok-traveling-tailor-trunk-show-mobile.jpg?4005121060620406786" alt="Bangkok Traveling Tailor Trunk Show" style="max-width: 100%; height: auto;"/&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I view it on mobile, I see the mobile image like I’m supposed to. If I view the email on desktop though, I see both the desktop image AND the mobile image. I do know that you have to inline CSS styles on MailChimp and I've also read that media queries don't work well in gmail, etc., but is there a solution to this? If not media queries, what else can I do to solve this?</p>