title: Responsive Design in Email - Issue with attribute selectors in Yahoo
body: <p>I'm trying to create a responsive email template to send to my company's users. Our list contains users from all sorts of ISPs like Gmail/Yahoo, etc. We have the responsive design working in most instances but we are having issues with Yahoo.</p>
  
  <p>The issue is that in Yahoo, it ignores the media query css wrapper and uses the responsive css on the desktop version. In the below example <code>@media only screen and (max-width: 580px)</code> gets ignored and our email displays with a width of 320px on desktop. </p>
  
  <pre><code> @media only screen and (max-width: 580px) {
       .container {
          width: 320px !important;
          margin: 0 !important;
          padding: 0 !important;
          overflow: hidden !important;
       }
    }
  </code></pre>
  
  <p><a href="http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries" rel="nofollow">Email On Acid</a> and <a href="http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/" rel="nofollow">Campaign Monitor</a> both recommended using CSS attribute selectors to fix the problem, but we find that that causes the responsive mobile layout on phones with Yahoo apps to display with the full width layout (it's not responsive).</p>
  
  <pre><code>@media only screen and (max-width: 580px) {
     body[yahoo] .container {
         width: 320px !important;
         margin: 0 !important;
         padding: 0 !important;
         overflow: hidden !important;
     }
  }
  </code></pre>
  
  <p>Has anyone found a solution so we don't need to use attribute selectors in our CSS and have the email display with the full-width layout on desktop with Yahoo? </p>