Replied to Discussion: Images flushed left on Outlook and non-responsive by Josh Knuteson
Just pinging again in case anyone has an opportunity to take a look and provide any recommendations?
Here's the full code:
<div align="center" class="he_stage" style="font-family: georgia, serif; font-size: 16px;" width="100%" data-theme="326214">
<style type="text/css">
html,
body {
margin: 0 !important;
padding: 0 !important;
line-height: 26px !important;
}
a {
word-wrap: break-word;
}
@media screen and (max-width: 650px) {
table,
tbody,
tr,
td {
width: 100% !important;
display: block !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
td[data-zone="text"],
.force-pad {
width: 92% !important;
padding-left: 4% !important;
padding-right: 4% !important;
}
img {
width: initial !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto;
}
img.bigimage {
width: 100% !important;
display: block !important;
}
td.two_col,
td.three_col {
padding-bottom: 10px !important;
}
td.article_stack_l {
padding-top: 20px !important;
}
td.article_stack_r {
padding-bottom: 20px !important;
}
td.image_container_2col,
td.image_container_3col {
padding: 10px 0 !important;
}
.phone {
padding-top: 6px !important;
padding-right: 8px !important;
}
.mobile-center {
text-align: center;
}
}
td.large-number {
color: #b5191e;
}
td.title-text {
color: #b5191e;
position: relative;
top: -19px;
line-height: 1.5;
}
td.supporting-text {
position: relative;
top: -21px;
}
ol li {
color: #4d4d4d;
font-family: Georgia, serif;
font-size: 16px;
line-height: 26px;
list-style-position: outside;
padding-left: 1em;
}
ul li {
color: #4d4d4d;
font-family: Georgia, serif;
font-size: 16px;
line-height: 26px;
list-style-position: outside;
padding-left: 1em;
}
@media screen and (max-width: 365px) {
td.mobile-block {
display: block !important;
width: 100% !important;
}
}
.button a {
color: #ffffff;
}
.button a:visited {
color: #ffffff;
}
</style>
<table width="650" class="full_width" style="width: 650px; margin-bottom: 0px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="he_nodrop full_width" valign="top" style="width: 650px; height: auto;" data-zone="vertical container" data-restrict="delete">
<table style="margin-bottom:0;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="left: 0px; top: 0px; width: 650px; height: auto; padding-bottom: 0px;" data-zone="horizontal container">
<table style="width:100%;margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="*" valign="top" style="width: 650px; height: auto;" data-zone="vertical container">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="*" valign="top" style="width: 650px; height: auto;" data-zone="vertical container" class="">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="force-pad" valign="top" style="width: 650px; text-align: left; padding-bottom: 0px; border-bottom: 0px none rgb(216, 217, 220); height: auto;" data-zone="image"><a target="_blank" href="https://www.cuna.org/Home/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_content=header_logo&utm_campaign=INSERT_MESSAGE_NAME" align="left"><img class="nav-logo" src="https://images.magnetmail.net/images/clients/CUNA/EMAIL_TOOLKIT_DEV_V1/logo-nav.png" alt="CUNA | Credit Union National Association" border="0" style="width: 150px; height: 54px;" width="150" height="54" align="left" hspace="0" vspace="0" draggable="false"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" data-zone="image" style="text-align: center; width: 650px; border-bottom: 6px solid rgb(215, 215, 215); height: auto;" class=""><img class="" src="https://maassets.higherlogic.com/image/CUNA/10px_spacer_217242.jpg" alt="10px_spacer_217242.jpg" border="0" style="width: 650px; height: 10px;" width="650" height="10" align="center" hspace="0" vspace="0" draggable="false"></td>
</tr>
<tr>
<td valign="top" style="padding: 20px; left: 0px; top: 0px; width: 610px; height: auto; font-family: georgia, serif; font-size: 16px;" data-zone="text"></td>
</tr>
<tr>
<td class="" valign="top" style="left: 0px; top: 0px; width: 650px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; height: auto;" data-zone="horizontal container">
<table style="width:100%;margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="*" valign="top" style="width: 240px; height: auto;" data-zone="vertical container">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="left: 0px; top: 0px; width: 240px; text-align: center; height: auto;" data-zone="image" class=""><img class="product-row-image" src="https://maassets.higherlogic.com/image/CUNA/PLACEHOLDER_PR_160580.jpg" alt="product-row-img-responsive.png" border="0" style="width: 240px; height: 160px;" width="240" height="160" align="center" hspace="0" vspace="0" draggable="false"></td>
</tr>
</tbody>
</table>
</td>
<td width="*" valign="top" style="width: 390px; height: auto; padding-bottom: 0px; padding-left: 20px;" data-zone="vertical container">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="padding: 0px 0px 10px; width: 390px; height: auto; font-family: 'century gothic',centurygothic,sans-serif; color:#4d4d4d; font-size: 24px;" data-zone="text">
<div><strong>Product Row Title</strong> </div>
</td>
</tr>
<tr>
<td valign="top" style="padding: 0px 0px 10px; left: 0px; top: 0px; width: 390px; height: auto; color: rgb(102, 102, 102); text-transform: uppercase; letter-spacing: 1px; font-family: 'century gothic',centurygothic,sans-serif; font-size: 15px; font-weight: bold;" data-zone="text">
<div>Subhead</div>
</td>
</tr>
<tr>
<td valign="top" data-zone="text" style="padding: 0px 0px 20px; font-family: georgia, serif; font-size: 16px; color: rgb(77, 77, 77); width: 390px; height: auto;" class="">
<div>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. </div>
</td>
</tr>
<tr>
<td valign="top" style="padding: 0px; width: 390px; height: auto; font-family: 'century gothic',centurygothic,sans-serif; font-size: 16px;" data-zone="text">
<div><strong><span style="font-size:14px;"><span style="font-family:Century Gothic,CenturyGothic,sans-serif;text-transform:uppercase;"><span style="color:#4d4d4d;"><span style="line-height: 1.5;"><a style="text-decoration: none;color:#B5191E" href="http://cuna.org" target="_blank">SECONDARY CALL TO ACTION ></a></span></span></span></span></strong></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding: 20px; left: 0px; top: 0px; width: 610px; height: auto; font-family: georgia, serif; font-size: 16px;" data-zone="text"></td>
</tr>
<tr>
<td valign="top" data-zone="image" style="left: 0px; top: 0px; text-align: center; width: 650px; height: auto;" class=""><img class="" src="https://maassets.higherlogic.com/image/CUNA/10px_spacer_217242.jpg" alt="10px_spacer_217242.jpg" border="0" style="width: 650px; height: 10px;" width="650" height="10" align="center" hspace="0" vspace="0" draggable="false"></td>
</tr>
<tr>
<td width="*" class="main_message" valign="top" style="width: 650px; height: auto;" data-zone="vertical container" data-restrict="drag delete edit copy">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="*" valign="top" style="left: 0px; top: 0px; width: 650px; height: auto;" data-zone="vertical container">
<table width="100%" style="margin-bottom:0;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" data-zone="text" style="padding: 10px; font-family: georgia, serif; font-size: 16px; width: 630px; border-top: 2px solid rgb(215, 215, 215); height: auto;" class="">
<div>
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="vertical container" style="width: 650px; border-top: 0px none rgb(215, 215, 215); border-bottom: 0px none rgb(215, 215, 215); padding-top: 10px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td class="force-pad" data-zone="image" style="width: 650px; text-align: center; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; height: auto;" valign="top"><a align="center" href="https://www.cuna.org/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=cuna_logo_footer" target="_blank"><img align="center" alt="Credit Union National Association" border="0" draggable="false" height="50" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/CUNA-primary-RGB-wide_cropped_217207.png" style="width: 139px; height: 50px;" vspace="0" width="139"></a></td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="text" style="padding: 10px 0px; left: 0px; top: 0px; width: 650px; line-height: 14px; font-family: 'century gothic', centurygothic, sans-serif; font-size: 16px; height: auto;" valign="top">
<div style="padding-bottom: 5px; text-align: center;"> <span style="font-size:12px;"><strong><span style="color:#767676;"><span style="text-transform: uppercase;">Washington, D.C.</span></span>
</strong>
</span>
</div>
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;">99 M Street SE Suite 300<br> Washington, D.C. 20003</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td data-zone="text" style="padding: 10px 0px 0px; width: 650px; line-height: 14px; font-family: 'century gothic', centurygothic, sans-serif; font-size: 16px; height: auto;" valign="top">
<div style="padding-bottom: 5px; text-align: center;"> <span style="font-size:12px;"><strong><span style="color:#767676;"><span style="text-transform: uppercase;">Madison, WI</span></span>
</strong>
</span>
</div>
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;">5710 Mineral Point Road<br> Madison, WI 53705-4454</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; padding-left: 0px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="image" style="left: 0px; top: 0px; width: 640px; text-align: center; padding-top: 25px; padding-right: 10px; padding-bottom: 10px; height: auto;" valign="top"><img align="center" alt="phone_icon_129072.png" border="0" class="phone" draggable="false" height="36" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/phone_icon_129072.png" style="width: 34px; height: 36px;" vspace="0" width="34"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td data-zone="text" style="padding: 0px; width: 650px; font-family: georgia, serif; font-size: 16px; height: auto;" valign="top">
<div style="text-align: center;"> <span style="font-size:12px;"><strong><span style="color:#767676;"><span style="font-family:centurygothic;line-height:1.5; text-transform: uppercase;">Contact our member experience team</span></span>
</strong>
</span>
</div>
</td>
</tr>
<tr>
<td data-zone="text" style="padding: 0px; width: 650px; font-family: georgia, serif; font-size: 16px; border-bottom: 0px none rgb(215, 215, 215); height: auto;" valign="top">
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;"><span style="font-family:centurygothic;line-height:1;">800-356-9655 or <a data-fontcolor="3" href="mailto:hello@cuna.coop" style="color: rgb(95, 95, 95);" target="_blank">hello@cuna.coop</a></span></span>
</span>
</div>
</td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; padding-top: 25px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td class="mobile-center" data-zone="text" style="padding: 0px 0px 10px; width: 650px; font-family: georgia, serif; font-size: 16px; height: auto;" valign="top">
<div style="text-align: center;"> <span style="font-size:12px;"><span style="color:#767676;"><span style="font-family:centurygothic;line-height:1;"><a data-fontcolor="3" href="https://www.cuna.org/My-CUNA/Account/My-Email-Preferences/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=email_preferences_footer" style="color: rgb(95, 95, 95);" target="_blank">Email Preferences</a> | <a data-fontcolor="3" href="https://www.cuna.org/My-CUNA/Account/My-Email-Preferences/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=unsubscribe_footer" style="color: rgb(95, 95, 95);" target="_blank">Unsubscribe</a> | <a data-fontcolor="3" href="https://www.cuna.org/PrivacyPolicy/?utm_source=real_magnet&utm_medium=INSERT_CHANNEL&utm_campaign=INSERT_MESSAGE_NAME&utm_content=privacy_policy_footer" style="color: rgb(95, 95, 95);" target="_blank">Privacy Policy</a> </span></span>
</span>
</div>
</td>
</tr>
<tr>
<td data-zone="vertical container" style="width: 650px; height: auto;" valign="top" width="*">
<table cellpadding="0" cellspacing="0" style="margin-bottom:0;" width="100%">
<tbody>
<tr>
<td data-zone="text" style="padding: 0px 0px 20px; left: 0px; top: 0px; width: 650px; font-family: georgia, serif; font-size: 16px; height: auto;" valign="top">
<div style="text-align: center;"> <a align="center" href="https://twitter.com/cuna" target="_blank"><img align="center" alt="CUNA Twitter" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/twitter-square_-_FontAwesome_129071.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> <a align="center" href="https://www.linkedin.com/company/credit-union-national-association" target="_blank"><img align="center" alt="CUNA LinkedIn" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/linkedin-square_-_FontAwesome_129074.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> <a href="https://www.facebook.com/CreditUnionNationalAssociation" style="" target="_blank"><img align="center" alt="CUNA Facebook" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/facebook-square_-_FontAwesome_129070.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> <a href="https://www.instagram.com/creditunionnationalassociation/" style="" target="_blank"><img align="center" alt="CUNA Instagram" border="0" draggable="false" height="22" hspace="0" src="https://maassets.higherlogic.com/image/CUNA/instagram_-_FontAwesome_129073.png" style="width: 22px; height: 22px;" vspace="0" width="22"></a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Started a new discussion: Images flushed left on Outlook and non-responsive