title: How to make responsive email work with yahoo mobile app?
body: <p>I have created an email template that is tested to work properly on desktop clients like gmail/yahoo/outlook and also tested correct responsive behavior on mobile gmail app. I am using Android/Galaxy S4.</p>
  
  <p>The responsive styles are not effective on yahoo mobile app. Infact, it is not reading the CSS rules from 'style'. Though, desktop chrome set to mobile views (using Inspect -> toggle device toolbar) and logging in to yahoo mail shows the email reading the responsive styles.</p>
  
  <p>Question: Does yahoo mobile app not support responsiveness? Or, does it particularly need additional hacks?</p>
  
  <hr>
  
  <p>Update:
  I tried moving the CSS styles from head to body. It then reads the styles. But having styles in the body may not to be a good idea, gmail mobile app now ignores it.</p>
  
  <hr>
  
  <p>Here is the email code that I am using:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Sample Page&lt;/title&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="x-apple-disable-message-reformatting"&gt;
      &lt;style&gt;
          body {
              mso-line-height-rule:exactly;
              -ms-text-size-adjust:100%;
              -webkit-text-size-adjust:100%}
          table, td {
              mso-table-lspace: 0pt;
              mso-table-rspace: 0pt}
          table {
              border-collapse: collapse;
              border-spacing: 0;margin: 0 auto}
          img, a img {
              border:0 none;
              height: auto;
              line-height: 100%;
              outline: none;
              -ms-interpolation-mode: bicubic}
          a[x-apple-data-detectors] {
              color: inherit !important;
              text-decoration: none !important;
              font-size: inherit !important;
              font-family: inherit !important;
              font-weight: inherit !important;
              line-height: inherit !important}
          .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
              border-bottom: 0 !important;
              cursor: default !important}
          .a6S {
              display:none !important;
              opacity:0.01 !important}
          img.g-img + div {
              display:none !important}
          .button-link {
              text-decoration: none !important}
          @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
              .ios-gm-fix {
                  min-width: 375px !important;}
          }
      &lt;/style&gt;
      &lt;style&gt;
          #email-container {
              border:1px solid #CCC;
              border-radius:3px;
              border-collapse:separate}
          .desktop-view {color:blue}
          .mobile-view {color:#444}
          @media only screen and (max-width: 480px) {
              #email-container-wrap {
                  width:100% !important;
                  padding:0 !important}
              #email-container {
                  border:none;border-radius:0}
              .desktop-view {color:#444}
              .mobile-view {color:blue}
              #email-contents {
                  padding:15px 22px !important;
                  font-size:16px!important}
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body width="100%" bgcolor="#FFFFFF" style="margin:0 auto;padding:0;height:100%"&gt;
      &lt;center style="width=100%;background=#ffffff"&gt;
      &lt;table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F0F0F0" class="ios-gm-fix" style="margin:0;width:100%;line-height:100%"&gt;&lt;tbody&gt;
          &lt;tr&gt;
              &lt;td align="center" valign="top" width="100%" style="padding:0;margin:0;height:100%;width:100%"&gt;
                  &lt;div id="email-container-wrap" style="width:600px;max-width:600px;padding:25px 0;margin:0 auto"&gt;
                      &lt;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" id="email-container" style="background-color:#ffffff"&gt;&lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td align="center" valign="top" width="100%" id="email-contents" style="font-family:arial,helvetica,sans-serif;font-size:13px;line-height:18px;color:#333333;padding:20px 35px"&gt;
                                  &lt;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"&gt;&lt;tbody&gt;
                                      &lt;tr&gt;
                                          &lt;td align="center" valign="top" width="100%" id="email-header"&gt;
                                              &lt;table  role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"&gt;&lt;tbody&gt;
                                                  &lt;tr&gt;
                                                      &lt;td align="left" valign="top" width="100%"&gt;&lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/tbody&gt;&lt;/table&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td align="center" valign="top" width="100%" id="email-body"&gt;
                                              &lt;table  role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;
                                                          &lt;td align="left" valign="top" width="100%"&gt;
                                                              &lt;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"&gt;&lt;tbody&gt;
                                                                  &lt;tr&gt;
                                                                      &lt;td align="left" valign="top" width="100%" class="desktop-view" style="padding:3px 0 16px"&gt;
                                                                          &lt;span&gt;On Desktop, there will be a border and gray background on all sides.&lt;/span&gt;
                                                                      &lt;/td&gt;
                                                                  &lt;/tr&gt;
                                                                  &lt;tr&gt;
                                                                      &lt;td align="left" valign="top" width="100%" class="mobile-view" style="padding:3px 0 16px"&gt;
                                                                          &lt;span&gt;On Mobile, the border and background will not exist.&lt;/span&gt;
                                                                      &lt;/td&gt;
                                                                  &lt;/tr&gt;
                                                              &lt;/tbody&gt;&lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td align="center" valign="top" width="100%" id="email-footer"&gt;
                                              &lt;table  role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"&gt;&lt;tbody&gt;
                                                  &lt;tr&gt;
                                                      &lt;td align="left" valign="top" width="100%"&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/tbody&gt;&lt;/table&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;&lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;&lt;/table&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;&lt;/table&gt;
      &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>