Hello everyone.

I have hybrid email template newsletter that i work on for some time now. the thing is that in outlook.com i seems to get both the content of the mobile and the content of the desktop view.

This is the CSS code i use.

style type="text/css">

[owa] .mobile-show { display: none!important;mso-hide:all!important;font-size: 0!important;max-height: 0!important;line-height: 0!important;}

.ReadMsgBody { width: 100%; background-color: #f6f7fb; }
.ExternalClass { width: 100%; background-color: #f6f7fb; }

body {
width: 100%;
margin: 0;
padding: 0;
background-color: #f6f7fb;
font-family: Arial, sans-serif;
mso-line-height-rule: exactly;
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust: none !important;
direction:rtl;
}

table { border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; direction:rtl; }
table td { border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; }

table.mobile-show{ mso-hide:all; }

img { border: 0; -ms-interpolation-mode: bicubic; }

.mobile-show{
display: none;
mso-hide:all; §
font-size: 0;
max-height: 0;
line-height: 0;
}

.nav {
font-family: Arial, sans-serif;
font-size: 14px;
color: #000000;
font-weight: normal;
line-height: 14px;
mso-line-height-rule: exactly;
text-align: center;
vertical-align: top;
}

.nav a { color: #000000; text-decoration: none; }

.heading {
font-family: Arial, sans-serif;
font-size: 26px;
color: #2d2d2d;
font-weight: bold;
line-height: 26px;
mso-line-height-rule: exactly;
text-align: center;
vertical-align: top;
}

.heading a { color: #2d2d2d; text-decoration: none; }
.heading p{padding: 10px 0 15px 0;}

.title {
font-family: Arial, sans-serif;
font-size: 20px;
color: #2d2d2d;
font-weight: bold;
line-height: 24px;
mso-line-height-rule: exactly;
text-align: left;
vertical-align: top;
}

.title a { color: #2d2d2d; text-decoration: none; }

.link-list-title {
font-family: Arial, sans-serif;
font-size: 16px;
color: #2d2d2d;
font-weight: bold;
line-height: 20px;
mso-line-height-rule: exactly;
text-align: left;
vertical-align: top;
}

.link-list-title a { color: #2d2d2d; text-decoration: none; }

.body-txt { color: #222222; }
.body-txt a { color: #2d2d2d; font-weight: bold; }

.body-txt, .body-txt a {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
mso-line-height-rule: exactly;
vertical-align: top;
text-decoration: none;
}

.footer-txt {
font-family: Arial, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
line-height: 18px;
mso-line-height-rule: exactly;
text-align: center;
vertical-align: top;
}

.footer-txt a { color: #000000; text-decoration: none; }

.small-btn { background-color: #2d2d2d; }

.small-btn a {
display: block;
border: 0;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #ffffff;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-align: center;
background: #2d2d2d;
border: 1px solid #2d2d2d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.large-btn { background-color: #a5113c; }

.large-btn a {
display: block;
border: 0;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #ffffff;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-align: center;
background: #a5113c;
border: 1px solid #a5113c;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.small-btn, .large-btn {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
word-break: break-word;
word-wrap: break-word;
}

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

.full-width { width: 440px !important; padding: 0; }
/*.mobile-hidden { display: none !important; }*/

.mobile-no-padding { padding: 0 !important; }

.mobile-padding-nav { padding: 20px !important; }
.mobile-padding-title { padding: 15px 20px 0 20px !important; }
.mobile-padding-text { padding: 15px 20px 15px 20px !important; }
.mobile-whitebg { background-color: #ffffff !important; }
.mobile-show {display: block !important;}

}

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

.full-width { width: 280px !important; padding: 0; }
.mobile-hidden { display: none !important; }

.mobile-no-padding { padding: 0 !important; }
.mobile-padding-nav { padding: 20px !important; }
.mobile-padding-title { padding: 15px 20px 0 20px !important; }
.mobile-padding-text { padding: 15px 20px 15px 20px !important; }
.mobile-whitebg { background-color: #ffffff !important; }
.mobile-show {display: block !important;}
}

</style>

i tried everything that i know to target the dreaded outlook.com. if any of you can help me with this it will be grand!