title: IOS 8 ignoring my Media Queries
body: <p>I've built a responsive email however, on IOS8 (in Apple mail client and in phones browser) the media queries are being ignored. Note: this is across all the IOS 8 iPhones</p>
  
  <p>I've not provided a JSFIDDLE as it doesn't really work for emails since the code is all in one place.</p>
  
  <p>Email can be found here</p>
  
  <p><a href="http://news.yfish.co.uk/e/9F640D904C5C4FC1AAD220AFAE5C37B3/4/preview/" rel="nofollow">http://news.yfish.co.uk/e/9F640D904C5C4FC1AAD220AFAE5C37B3/4/preview/</a></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Rugby World Cup 2015&lt;/title&gt;
          &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
          &lt;meta content="width=device-width, initial-scale=1" name="viewport" /&gt;
  
          &lt;style type="text/css"&gt;
  
              #outlook a { padding: 0; }
              .ReadMsgBody { width: 100%; } .ExternalClass { width:100%; }                
              .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
              body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
              table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
              img { -ms-interpolation-mode: bicubic; }
              body { margin: 0; padding: 0; }
              img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
              table { border-collapse: collapse!important; }
              body { height: 100%!important; margin: 0; padding: 0; width: 100%!important; background-color: #e6e6e7; }
              a:visited { color: #ffffff; }
  
              @media screen {
                  @font-face {
                      font-family: 'humanst';
                      src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot);
                      src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot?#iefix) format('embedded-opentype'),
                           url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff2) format('woff2'),
                           url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff) format('woff'),
                           url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.ttf) format('truetype'),
                           url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.svg#humanst521_btroman) format('svg');
                      font-weight: normal;
                      font-style: normal;
                  }
  
              }
  
                   #fade {
                      -webkit-animation: fadeIn 1.5s forwards;
                      -moz-animation: fadeIn 1.5s forwards;
                      -o-animation: fadeIn 1.5s forwards;
                      animation: fadeIn 1.5s forwards;
                  }
  
                  @-webkit-keyframes fadeIn {
                      0% {opacity: 0; }
                      70% {opacity: 0; }
                      100% {opacity: 1; }
                  }
  
                  @-moz-keyframes fadeIn {
                      0% {opacity: 0; }
                      70% {opacity: 0; }
                      100% {opacity: 1; }
                  }
  
                  @-o-keyframes fadeIn {
                      0% {opacity: 0; }
                      70% {opacity: 0; }
                      100% {opacity: 1; }
                  }
  
                  @keyframes fadeIn {
                      0% {opacity: 0; }
                      70% {opacity: 0; }
                      100% {opacity: 1; }
                  }
  
  
                  #fadeUp {
                      -webkit-animation: imagefadeInUp 2s 0.8s forwards;
                      -moz-animation: imagefadeInUp 2s 0.8s forwards;
                      -o-animation: imagefadeInUp 2s 0.8s forwards;
                      animation: imagefadeInUp 2s 0.8s forwards;
                      visibility: hidden!important;
                  }
  
                  @-webkit-keyframes imagefadeInUp {
                      0% {opacity: 0; -webkit-transform: translateY(50px);}
                      50% {opacity: 0; -webkit-transform: translateY(50px); visibility: visible; }
                      100% {opacity: 1; -webkit-transform: translateX(0); visibility: visible;}
                  }
  
                  @-moz-keyframes imagefadeInUp {
                      0% {opacity: 0; -moz-transform: translateY(50px);}
                      50% {opacity: 0; -moz-transform: translateY(50px); visibility: visible;}
                      100% {opacity: 1; -moz-transform: translateX(0); visibility: visible;}
                  }
  
                  @-o-keyframes imagefadeInUp {
                      0% {opacity: 0; -o-transform: translateY(50px);}
                      50% {opacity: 0; -o-transform: translateY(50px); visibility: visible;}
                      100% {opacity: 1; -o-transform: translateX(0); visibility: visible;}
                  }
  
                  @keyframes imagefadeInUp {
                      0% {opacity: 0; transform: translateY(50px);}
                      50% {opacity: 0; transform: translateY(50px); visibility: visible;}
                      100% {opacity: 1; transform: translateX(0); visibility: visible;}
                  }               
  
              @media screen and (max-width: 600px), and screen (max-device-width: 600px) {
  
                  body { width: auto!important; }
                  table[class="fullWidth"] { width: 100%!important; }
                  table[class="contentWidth"] { width: 90%!important; }
                  td[class="center"] { text-align: center!important; }
                  table[class="centerTable"] { display: block!important; float: none!important; margin: 0 auto!important; }
                  td[class="fullCell"] { display: block!important; float: none!important; width: 100%!important;  }
                  td[id="padding"] { padding-bottom: 20px!important; }
  
              }
  
              @media screen and (max-width: 520px), and screen (max-device-width: 520px) {
  
                  table[class="mainTitle"] { width: 95%!important; }
                  img[class="imgScale"] { width: 100%!important; height: auto!important; }
  
              }
  
               @media screen and (max-width: 480px), and screen (max-device-width: 480px) {
  
                  td[class="mobileCell"] { display: block!important; float: left!important; width: 100%!important; padding: 0!important; }
                  td[class="mobileHide"] { display: none!important; }
                  table[class="logoCenter"] { display: block!important; float: none!important; margin: 0 auto!important; margin-bottom: 20px!important;  }
                  table[class="gifScale"] { width: 95%!important; }
  
               }
  
               @media screen and (max-width: 370px), and screen (max-device-width: 370px) {
  
                   table[class="mobileTitle"] { width: 90%!important; }
  
               }
  
          &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#e6e6e7"&gt;
  
      &lt;table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#e6e6e7" style="background-color: #e6e6e7;"&gt;&lt;!-- wrapper --&gt;
          &lt;tr&gt;
              &lt;td bgcolor="#e6e6e7"&gt;
  
                  &lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;
                      &lt;tr&gt;
                          &lt;td valign="top" bgcolor="#595959"&gt;
  
                              &lt;table width="99%" cellpadding="0" cellspacing="0" border="0" align="left" bgcolor="#595959"&gt;&lt;!-- header --&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td width="33%" style="padding-left: 20px;" class="mobileCell"&gt;
  
                                          &lt;table width="105" cellpadding="0" cellspacing="0" border="0" align="left" class="logoCenter"&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                      &lt;a href="http://news.yfish.co.uk/op/9F640D904C5C4FC1AAD220AFAE5C37B3/4/www.yfish.co.uk/"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;" class="img-scale"&gt;&lt;/a&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                      &lt;td width="33%" align="center" class="mobileCell"&gt;
  
                                          &lt;table width="91" cellpadding="0" cellspacing="0" border="0" align="center"&gt;&lt;!-- social --&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                      &lt;a href="http://news.yfish.co.uk/op/9F640D904C5C4FC1AAD220AFAE5C37B3/4/www.facebook.com/YellowFishBrighton" target="_blank" class="facebook"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/facebook.png" width="13" height="21" alt="Like us on Facebook" border="0" style="display: block; border: 0;"&gt;&lt;/a&gt;
                                                  &lt;/td&gt;
                                                  &lt;td width="20"&gt;&amp;nbsp;
  
                                                  &lt;/td&gt;
                                                  &lt;td&gt;
                                                      &lt;a href="http://news.yfish.co.uk/op/9F640D904C5C4FC1AAD220AFAE5C37B3/4/twitter.com/yfishchat" target="_blank" class="twitter"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/twitter.png" width="22" height="15" alt="Follow us Twitter" border="0" style="display: block; border: 0;"&gt;&lt;/a&gt;
                                                  &lt;/td&gt;
                                                  &lt;td width="20"&gt;&amp;nbsp;
  
                                                  &lt;/td&gt;
                                                  &lt;td&gt;
                                                      &lt;a href="mailto:contact@yfish.co.uk" class="mail"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/mail.png" width="16" height="11" alt="Contact us!" border="0" style="display: block; border: 0;"&gt;&lt;/a&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;&lt;!-- end social --&gt;
  
                                      &lt;/td&gt;
                                      &lt;td width="33%" style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height: 15px; text-align: right; vertical-align: middle; padding-right: 20px;" valign="middle" class="mobileHide"&gt;
                                          &lt;a href="http://news.yfish.co.uk/e/9F640D904C5C4FC1AAD220AFAE5C37B3/0/preview/" style="color: #ffffff; text-decoration: none;"&gt;It's a crime, not to view online&lt;/a&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr class="block"&gt;
                                      &lt;td height="25"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;&lt;!-- end header --&gt;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td bgcolor="#ffc216"&gt;
  
                              &lt;table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffc216"&gt;
                                  &lt;tr&gt;
                                      &lt;td height="50"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td align="center"&gt;
  
                                          &lt;table width="680" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth"&gt;
                                              &lt;tr&gt;
                                                  &lt;td align="center"&gt;
  
                                                      &lt;table width="505" cellpadding="0" cellspacing="0" border="0" align="center" class="mainTitle"&gt;
                                                          &lt;tr&gt;
                                                              &lt;td&gt;
                                                              &lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/title.png" width="505" height="61" alt="Rugby World Cup" style="display: block; border: 0;" class="imgScale" id="fade"&gt;
                                                              &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/table&gt;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td height="25"&gt;&amp;nbsp;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td align="center"&gt;
  
                                                      &lt;table width="437" cellpadding="0" cellspacing="0" border="0" align="center" class="gifScale"&gt;
                                                          &lt;tr&gt;
                                                              &lt;td&gt;
                                                              &lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/flag.gif" width="437" height="233" alt="Rugby" style="display: block; border: 0;" class="imgScale" id="fadeUp"&gt;
                                                              &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/table&gt;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="30"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;                        
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td height="25"&gt;&amp;nbsp;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td align="center"&gt;
  
                              &lt;table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" class="fullWidth"&gt;
                                  &lt;tr&gt;
                                      &lt;td height="50" bgcolor="#ffffff"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td bgcolor="#ffffff"&gt;
  
                                          &lt;table width="356" cellpadding="0" cellspacing="0" border="0" align="center" class="mobileTitle"&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                  &lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/titletwo.png" width="356" height="52" alt="Join us on the 19th September" style="display: block; border: 0;" class="imgScale"&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25" bgcolor="#ffffff"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td style="font-family: georgia, verdana, sans-serif; font-size: 18px; line-height: 22px; color: #424242; text-align: center; font-style: italic;" bgcolor="#ffffff"&gt;
                                      Your V.I.P invitation
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25" bgcolor="#ffffff"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td bgcolor="#ffffff"&gt;
  
                                          &lt;table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth"&gt;
                                              &lt;tr&gt;
                                                  &lt;td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center"&gt;
  
          Previewer I’d love if you could join me at our Yellow Fish table for an afternoon and night of hospitality, Yellow Fish style!&lt;br&gt;&lt;br&gt; 
  
          Aside of full hospitality and category A seats at the fabulous AMEX stadium, I’d like to invite you to stay overnight in Brighton, provide you with transfers to/from the match, enjoy a bit of Brighton nightlife and then brunch on Sunday before you head off. All you have to do is get to Brighton!&lt;br&gt;&lt;br&gt;
  
          Kick off is at 16:45 so I’d plan for being in to Brighton around lunch time and once I have more information I’ll firm up details.
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25" bgcolor="#ffffff"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td align="center" bgcolor="#ffffff"&gt;
  
                                          &lt;table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth"&gt;
                                              &lt;tr&gt;
                                                  &lt;td width="50%" valign="top" class="fullCell" id="padding"&gt;
  
                                                      &lt;table width="248" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable"&gt;
                                                          &lt;tr&gt;
                                                              &lt;td&gt;
                                                              &lt;a href="http://news.yfish.co.uk/op/9F640D904C5C4FC1AAD220AFAE5C37B3/4/www.yfish.co.uk/thank-you/"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/attending.png" width="248" height="45" alt="I can attend" style="display: block; border: 0;"&gt;&lt;/a&gt;
                                                              &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/table&gt;
  
                                                  &lt;/td&gt;
                                                  &lt;td width="50%" valign="top" class="fullCell"&gt;
  
                                                      &lt;table width="248" cellpadding="0" cellspacing="0" border="0" align="right" class="centerTable"&gt;
                                                          &lt;tr&gt;
                                                              &lt;td&gt;
                                                              &lt;a href="http://news.yfish.co.uk/op/9F640D904C5C4FC1AAD220AFAE5C37B3/4/www.yfish.co.uk/a-real-shame/"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/unable.png" width="248" height="45" alt="I'm unable to attend" style="display: block; border: 0;"&gt;&lt;/a&gt;
                                                              &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/table&gt;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25" bgcolor="#ffffff"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td bgcolor="#ffffff"&gt;
  
                                          &lt;table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth"&gt;
                                              &lt;tr&gt;
                                                  &lt;td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center"&gt;
                                                  It should be great fun, a great game watching the Bokkers in Brighton and I really hope you can join me.&lt;br&gt;&lt;br&gt;
  
                                                  Best
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;&amp;nbsp;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
  
                                                      &lt;table width="112" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable"&gt;
                                                          &lt;tr&gt;
                                                              &lt;td&gt;
                                                              &lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/maria.png" width="112" height="33" alt="Maria" style="display: block; border: 0;"&gt;
                                                              &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/table&gt;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="100" bgcolor="#ffffff"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td height="25"&gt;&amp;nbsp;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td bgcolor="#595959"&gt;
  
                              &lt;table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#595959" class="fullWidth"&gt;&lt;!-- footer --&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td align="center"&gt;
  
                                          &lt;table width="105" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                      &lt;a href="http://news.yfish.co.uk/op/9F640D904C5C4FC1AAD220AFAE5C37B3/4/www.yfish.co.uk/"&gt;&lt;img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;"&gt;&lt;/a&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td style="font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #ffffff; text-align: center;"&gt;
                                      Tel +44 (0) 1273 223 500 | Fax +44 (0) 1273 323 257 | &lt;a href="mailto:contact@yfish.co.uk" style="text-decoration: none; color: #ffffff;"&gt;contact@yfish.co.uk&lt;/a&gt;&lt;br&gt;&lt;br&gt;
  
  Copyright &amp;copy; 2014 Yellow Fish
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td height="25"&gt;&amp;nbsp;
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;&lt;!-- end footer --&gt;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;&lt;!-- end wrapper --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>I've tried removing all other queries and also tried altering Query widths. No luck!</p>
  
  <p>Thanks in advance       </p>