Hi all,

Since I have updated my iPhone to the latest iOS 10.3.1 it seems to have changed the way in which it renders my Email designs in Apple Mail.

It seems to be completely ignoring my @media queries. I have tried many different methods to try and fix these issues, but I am having no look. Is anyone else having similar issues, or can shed any light on what I am doing wrong.

I have been using this coding successfully for the past 2 years so I know that it has worked 100% perfectly prior to the update.

Many thanks in advance, below you can see the css used which is relevant to the new issue I am having:


<style type=“text/css”>
#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 {border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
  img {-ms-interpolation-mode:bicubic;}
  img {border:0; line-height:100%; outline:none; text-decoration:none; display: block;}
  body {height:100% !important; margin:0; padding:0; width:100% !important; font-family: Arial, Helvetica, verdana, sans-serif;}


*[class=show-content] {display:none !important; max-height:none !important;}

@media screen and (max-width:480px) {

  *[class=hide-content] {display:none !important; font-size: 0 !important; max-height: 0 !important; line-height: 0 !important; padding: 0 !important; mso-hide: all !important; }
  *[class=show-content] {display:block !important;}
  *[class=“gmail-show”] {display: block !important; max-height: 100% !important; overflow: visible !important; margin: 0px !important; padding: 0px !important;}

</style>