Hey,

I've been building a Newsletter recently, it seems to be working in most Mail Apps except for Yahoo Mail for Samsung Galaxy s7 Edge (Yahoo Version 5.13.3.1319467) & iPhone 6 (Yahoo Version 4.13.0 (37409)).

It looks like it is stripping out all of my CSS - has anybody else had this issue/knows what could be causing it?

I'm fairly new to this, so any help would be greatly appreciated.


                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <meta name="format-detection" content="telephone=no">
<title></title>
<style>
body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
div[style*="margin: 16px 0"] {
  margin: 0 !important;
}
table, td {
  border-collapse: collapse !important;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}
img {
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
}
a {
  color: inherit;
  outline: none;
  text-decoration: none;
}
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;
}
* {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}
.ReadMsgBody, .ExternalClass {
  width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
  line-height: 100%;
}
img{display: block;}
.module270-left {padding-right: 9px;}
.module270-right {padding-left: 9px;}
.pr10 {padding-right: 9px;}
.pl10 {padding-left: 9px;}
.body {min-width:100vw;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
    .email-container {
        min-width: 375px !important;
    }
}
</style>
<style>
@media only screen and (max-width: 493px), only screen and (max-device-width: 493px) {
body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }

#align-center {text-align: center !important; height: auto !important;}
.width100, .module270-left, .module270-right, .module270, .two-col, .two-col img {width: 100% !important;}
.width94 {width: 93% !important;}
.width50 {width: 50% !important;}
.mobile-hide {display: none !important;}
.stat-module {width: 93% !important;}
.pr10 {padding-right: 0 !important; width: 100% !important;}
.pl10 {padding-left: 0 !important; width: 100% !important;}
table.two-col {width: 100% !important;}
#buttons {width: 100% !important; padding: 0 !important;}
td.button a {width: 90% !important; padding: 10px 5% !important; font-size: 17px !important; box-sizing: border-box;}
td.story font {font-size: 16px !important; text-align: center !important; height: auto !important; }
td.title font {font-size: 20px !important;}
td.stats font {font-size: 16px !important;}
td.stats-large font {font-size: 30px !important;}
table.footer {width: 93% !important;}
.no-fixedheight{height: auto !important;}
}
</style>
</head>

`