title: Targeting Yahoo Mail browser CSS
body: <p>I was wondering if anyone came up with a hack for targeting the Yahoo Mail CSS on browsers.
  Specifically, not the inline CSS but the Yahoo-created classes within a  tag in an email. </p>
  
  <p>The problem that I am facing is this: I coded a responsive template for a campaign, and while everything works as it should on iOS and every major mail clients, Yahoo has a quirk that I have not found anywhere else: It reads the  tag as it would read a regular one, completely skipping over media queries (Actually, it changes the code of everything considered as styling). What I mean by that is this: It'll read the styles from the bottom to the top, therefore applying the smaller screen styles to the email even if it is read on a big device, like a computer screen.  </p>
  
  <p>Here is what it looks like after being processed by Yahoo Mail :</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  _filtered #yiv6637726198 {
  text-align:left;}
  #yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-    align:middle !important;height:20px !important;}
  #yiv6637726198 
  
  _filtered #yiv6637726198 {
  }
  #yiv6637726198 .yiv6637726198main {width:100%;}
  #yiv6637726198 .yiv6637726198header {width:100%;}
  #yiv6637726198 .yiv6637726198header-img {width:100%;height:auto;}
  #yiv6637726198 .yiv6637726198logo-img {width:75px;height:30px;}
  #yiv6637726198 .yiv6637726198icon-img {width:19px;height:18px;}
  #yiv6637726198 .yiv6637726198icon-wrap {width:19px;}
  #yiv6637726198 .yiv6637726198button {width:100%;height:auto;}
  #yiv6637726198 .yiv6637726198footer {display:none;}
  #yiv6637726198 .yiv6637726198footer-size {width:100%;}
  #yiv6637726198 .yiv6637726198btn {width:100px !important;height:auto !important;}
  #yiv6637726198 .yiv6637726198text {font-size:9px !important;text-align:center;}
  #yiv6637726198 .yiv6637726198smaller {width:5px !important;height:5px !important;}
  #yiv6637726198 .yiv6637726198show {display:block;}
  #yiv6637726198 .yiv6637726198title {font-size:12px !important;}
  #yiv6637726198 .yiv6637726198date {font-size:9px !important;line-height:14px !important;}
  #yiv6637726198 .yiv6637726198smaller {width:10px !important;}
  #yiv6637726198 .yiv6637726198small-hide {display:none;}
  #yiv6637726198 .yiv6637726198row {display:table-row;text-align:left;}
  #yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-   align:middle !important;height:20px !important;}
  #yiv6637726198 
  
  &lt;/style&gt; 
  </code></pre>
  
  <p>And here is my code, as written in my HTML and understood by other responsive-enabled mail clients :</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  @media (max-width:321px) {
      .row { display:table-row !important; text-align:left !important;  }
      .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
      }
  
      @media (max-width:241px) {
      .hide { display:none !important; }
      .main { width:100% }
      .header { width:100%; }
      .header-img { width:100%; height:auto; }
      .logo-img { width:75px; height:30px; }
      .icon-img { width:19px; height:18px; }
      .icon-wrap { width:19px; }
      .button { width:100%; height:auto; }
      .footer { display:none !important; }
      .footer-size { width:100% } 
      .btn { width:100px !important; height:auto !important }
      .text { font-size:9px !important; text-align:center !important; }
      .smaller { width:5px !important; height:5px !important; }
      .show { display:block; }
      .title { font-size:12px !important; }
      .date { font-size:9px !important; line-height:14px !important; }
      .smaller { width:10px !important }
      .small-hide { display:none !important; } 
      .row { display:table-row !important; text-align:left !important;  }
      .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
      }
  
      &lt;/style&gt;
  </code></pre>
  
  <p>(You'll understand this is some small part of the whole thing, as showing the full code would take too much place).</p>
  
  <p>Also, my inline CSS is done properly as needed for html-emails.</p>
  
  <p>So, do you guys have any idea for a little hack?
  And a small question here, would an inline !important have priority over a media query activated !important ?</p>
  
  <p>Thanks for your help.  </p>
  
  <p>// UPDATE 1 //</p>
  
  <p>With some testing, I found out that by specifying a "full width" media query (max-width:900px) or something like that, and by styling every element the same as their inline styles with !important, AND by inverting the order off my media queries (Adding a min-width to those now that the order is inverted), Yahoo Mail would pick that bottom one to style the whole email. It removes every responsiveness, but at least it doesn't break the whole layout or stretch it to the moon and back...</p>