I'm going through testing my email newsletter, and everything seems to be working pretty solidly, except for windows outlook. It's working for osx outlook just not any version of windows. Basically outlook seems to ignore the main container and everything is spread out. It also is breaking styles, especially text and hr styles.
https://codepen.io/joefus1o4/pen/RyyyLL?editors=1000
<!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" lang="en" xml:lang="en" style="background:#f3f3f3!important">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
@media only screen {
html {
min-height: 100%;
background: #cacaca!important
}
}
@media only screen and (max-width:596px) {
.small-float-center {
margin: 0 auto!important;
float: none!important;
text-align: center!important
}
.small-text-center {
text-align: center!important
}
.small-text-left {
text-align: left!important
}
.small-text-right {
text-align: right!important
}
}
@media only screen and (max-width:596px) {
table.body img {
width: auto;
height: auto
}
table.body center {
min-width: 0!important
}
table.body .container {
width: 95%!important
}
table.body .columns {
height: auto!important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 16px!important;
padding-right: 16px!important
}
table.body .columns .columns {
padding-left: 0!important;
padding-right: 0!important
}
table.body .collapse .columns {
padding-left: 0!important;
padding-right: 0!important
}
th.small-4 {
display: inline-block!important;
width: 33.33333%!important
}
th.small-6 {
display: inline-block!important;
width: 50%!important
}
th.small-12 {
display: inline-block!important;
width: 100%!important
}
.columns th.small-12 {
display: block!important;
width: 100%!important
}
table.menu {
width: 100%!important
}
table.menu td,
table.menu th {
width: auto!important;
display: inline-block!important
}
table.menu.vertical td,
table.menu.vertical th {
display: block!important
}
table.menu[align=center] {
width: auto!important
}
}
@media only screen and (max-width:596px) {
.header .title {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header h2.text-right {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.month.small-6.large-6.columns.first {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.year.small-6.large-6.columns.last {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.small-6.large-4.columns.first {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.small-6.large-4.columns {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.header th.small-6.large-4.columns.last {
padding: 0!important;
width: 100%!important
}
}
@media only screen and (max-width:596px) {
.header hr {
width: 100%!important
}
}
@media only screen and (max-width:596px) {
.header .hr_3 {
width: 100%!important
}
}
@media only screen and (max-width:596px) {
.header p.text-left {
margin-bottom: 0!important;
padding-top: 4px!important;
padding-bottom: 2px!important;
padding-right: 8px!important
}
}
@media only screen and (max-width:596px) {
.header p.text-center {
margin-bottom: 0!important;
padding-top: 4px!important;
padding-bottom: 2px!important;
padding-left: 8px!important
}
}
@media only screen and (max-width:596px) {
.header p.text-right {
border: 0!important;
margin-top: 0!important
}
}
@media only screen and (max-width:596px) {
.feature h2 {
padding: 0!important
}
}
@media only screen and (max-width:566px) {
.feature h2 {
font-size: 18px!important
}
}
@media only screen and (max-width:448px) {
.feature h2 {
font-size: 15.5px!important
}
}
@media only screen and (max-width:596px) {
.feature p {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.feature hr {
width: 93%!important
}
}
@media only screen and (max-width:596px) {
.body-articles hr {
width: 93%!important
}
}
@media only screen and (max-width:596px) {
.body-articles .wrapper-inner {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.video h2 {
padding-left: 0!important
}
}
@media only screen and (max-width:419px) {
.video h2 {
font-size: 22px!important
}
}
@media only screen and (max-width:596px) {
.video hr {
width: 93%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .OR_ad {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.ad-social h2 {
padding: 0!important;
font-size: 18px!important
}
}
@media only screen and (max-width:596px) {
.ad-social p {
padding: 0!important
}
}
@media only screen and (max-width:596px) {
.ad-social .facebook {
margin: 0!important;
margin-bottom: 10px!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .instagram {
margin: 0!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .linkedin {
margin: 0!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .twitter {
margin: 0!important;
margin-bottom: 10px!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social .youtube {
margin: 0!important;
width: 40%!important
}
}
@media only screen and (max-width:596px) {
.ad-social hr {
width: 93%!important
}
}
@media only screen and (max-width:495px) {
.footer a {
font-size: 13px!important
}
}
</style>
</head>
<body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;background:#f3f3f3!important;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"><span class="preheader" style="color:#cacaca!important;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden"></span>
<table class="body" style="Margin:0;background:#f3f3f3!important;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;height:100%;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<center data-parsed="" style="min-width:580px;width:100%">
<table align="center" class="container float-center" style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="wrapper header" align="center" style="background:#8a8a8a;background-color:#fefefe;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="wrapper-inner" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:20px;padding-top:40px;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<hr class="hr_1" width="515" size="5" noshade="" style="background-color:#fefefe;border:0;border-top:5px solid;margin:0 auto">
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:16px;text-align:left;width:564px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<center data-parsed="" style="min-width:532px;width:100%">
<a class="OR_logo float-center" target="_blank" href="https://www.outdoorretailer.com/" align="center" style="Margin:0;color:#2199e8;font-family:Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none"><img width="205" height="61" src="https://s15.a2zinc.net/Clients/EmeraldExpo/GlobalAdmin/CUSTOM/5_18_OR_Logo.jpg" alt="outdoor retailer logo" style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:inline;max-width:100%;outline:0;padding-top:34px;text-decoration:none;width:auto"></a>
</center>
</th>
<th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="month small-6 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:8px;text-align:left;width:274px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<h2 class="title" style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-left:6px;text-align:left;word-wrap:normal">MAY</h2></th>
</tr>
</table>
</th>
<th class="year small-6 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:16px;text-align:left;width:274px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<h2 class="text-right" style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-right:6px;text-align:right;word-wrap:normal">2018</h2></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<hr class="hr_2" width="515" size="5" noshade="" style="background-color:#fefefe;border:0;border-top:5px solid;margin:0 auto">
</tr>
</tbody>
</table>
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="small-6 large-4 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:8px;text-align:left;width:177.33px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<p class="text-left small-text-right" style="Margin:0;Margin-bottom:10px;border-right:1px solid;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;margin-bottom:8px;margin-top:6px;padding:0;padding-bottom:4px;padding-left:8px;padding-top:6px;text-align:left">Summer Market</p>
</th>
</tr>
</table>
</th>
<th class="small-6 large-4 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:8px;text-align:left;width:177.33px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
<p class="text-center small-text-left" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;margin-bottom:8px;margin-top:6px;padding:0;padding-bottom:4px;padding-top:6px;text-align:center">July 23-26, 2018</p>
</th>
</tr>
</table>
</th>
<th class="small-6 large-4 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:16px;text-align:left;width:177.33px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
