Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar

Responsive Code Not Rendering Properly in Office 365 on Mac OS

Jill_Harrison1
Level 1
Level 1
‎02-16-2023 09:24 AM
‎02-16-2023 09:24 AM

Responsive Code Not Rendering Properly in Office 365 on Mac OS

Hello,

I posted this question as a response to someone else's post, but thought I might have a better chance if make this a post of its own.

I have been using the same responsive code for years (I hand code all emails and upload code to Marketo), and it renders perfectly in all email clients, but recently, it is not rendering properly in O365 on Mac OS. All larger images that are positioned to the left or right of text are stacking as if O365 thinks my Mac OS desktop is a mobile device.

If any one knows what adjustments I can make to my below responsive code to fix the issue, I would very much appreciate the help:

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<title>Riverbed</title>
<style type="text/css">
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700';
div, p, a, li, td {-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
body {margin:0;padding:0;min-width:100%;background-color:#fafafa;}
table td {border-collapse:collapse;}
.ExternalClass {width:100%;}
.ExternalClass * {line-height: 110%}
img {-ms-interpolation-mode: bicubic; }
a, a:link, a:visited, a:hover {color:#555555; text-decoration:none;}
.applelinkswhite a{color:#ffffff !important; text-decoration:none !important;}
.applelinkspurple a{color:#a571cd !important; text-decoration:none !important;}
.applelinksblue a{color:#00aff0!important; text-decoration:none !important;}
@-ms-viewport { width: device-width; }
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {
a[href^="tel"], a[href^="sms"], a {
color: inherit;
cursor: default;
text-decoration:none;
}
}
body[notwebmail] *[class=nomob-late]{font-family:'Source Sans Pro',sans-serif !important;}
.gradient-text {
background-color: #4E4FA9;
background-image: linear-gradient(90deg, #4E4FA9, #A831D6);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
body[notwebmail] *[class=mob-h1-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-h1-txt-realign]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-h1-txt-light]{font-family:'Source Sans Pro',sans-serif !important; font-weight:300 !important;}
body[notwebmail] *[class=mob-h1-txt-xlight]{font-family:'Source Sans Pro',sans-serif !important; font-weight:300 !important;}
body[notwebmail] *[class=mob-quote-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-h2-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-h3l-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-article-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-h3-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-h3-txt-static]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-h3-txt-light]{font-family:'Source Sans Pro',sans-serif !important; font-weight:300 !important;}
body[notwebmail] *[class=mob-h4-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-subhead-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-regular-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-regular-txt-realign]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-regular-txt-static]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-herocopy-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-boldcopy-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-boldcopy-txt-uc]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}
body[notwebmail] *[class=mob-copy-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-copy-txt-static]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-foot-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-foot-txt-sb]{font-family:'Source Sans Pro',sans-serif !important; font-weight:normal !important;}
body[notwebmail] *[class=mob-cta-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:700 !important;}
body[notwebmail] *[class=mod18-hidden-txt]{font-family:'Source Sans Pro',sans-serif !important; font-weight:600 !important;}

@media screen and (max-device-width: 699px), screen and (max-width: 699px) {
/*fluid styles*/
*[class=to100pc]{width:100% !important; height:auto !important;}
*[class=to100pc-limited]{width:100% !important; height:auto !important; max-width:446px !important; max-height:446px !important;}
*[class=to80pc-to100pc]{width:80% !important; height:auto !important;}
*[class=to40pc-to100pc]{width:40% !important; height:auto !important;}
*[class=to20pc-to100pc]{width:20% !important; height:auto !important;}
*[class=to80pc]{width:80% !important; height:auto !important;}
*[class=w16]{width:16px !important; height:auto !important;}
*[class=w26]{width:26px !important; height:auto !important;}
*[class=w38]{width:38px !important; height:auto !important;}
*[class=h2]{ height:2px !important;}
*[class=h12]{ height:12px !important;}
*[class=h18]{ height:18px !important;}
*[class=h30]{ height:30px !important;}
*[class=h30-line]{ height:30px !important; border-top:#ECECEC 1px solid !important}
*[class=wauto]{ width:auto !important;}
*[class=hauto]{ height:auto !important;}
*[class=w2-h36]{width:2px !important; height:36px !important;}
*[class=text-realign]{text-align:center !important}
*[class=nominwidth]{min-width:2px !important}
*[class=nomob]{display:none !important;}
*[class=noline]{border:0px !important}
/*font switch*/
*[class=mob-h1-txt-xlight]{font-size:30px !important; line-height: 36px !important;}
*[class=mod18-hidden-txt]{font-size:18px !important;line-height:24px !important;color:#415464 !important;}
/*column switch*/
*[class=flip] {width: 100% !important; height: auto !important; }
*[class=tblock] { display: table-footer-group!important; width: 100% !important; }
*[class=mod15-btn-box]{text-align:left !important;}
*[class=overvisible]{overflow:visible !important;}
}
@media screen and (max-device-width: 519px), screen and (max-width: 519px) {
/*fluid styles*/
*[class=to100pc-late]{width:100% !important; height:auto !important;}
*[class=to70pc-late]{width:70% !important; height:auto !important;}
*[class=to80pc-to100pc]{width:100% !important; height:auto !important;}
*[class=to40pc-to100pc]{width:100% !important; height:auto !important;}
*[class=to20pc-to100pc]{width:100% !important; height:auto !important;}
*[class=w2]{width:2px !important;}
*[class=h16]{height:16px !important;}
*[class=h22]{height:22px !important;}
*[class=w12]{width:12px !important;}
*[class=w14]{width:14px !important;}
*[class=w20]{width:20px !important;}
*[class=w22]{width:22px !important;}
*[class=w60]{width:60px !important;}
*[class=nav-minwidth]{min-width:68px !important;}
*[class=f-mob-txt]{font-size:11px !important; line-height: 16px !important; font-weight: normal !important}
*[class=nav-txt]{font-size:15px !important; line-height: 18px !important; letter-spacing: 0px !important; vertical-align: bottom !important; font-weight: normal !important}
*[class=nomob-late]{display:none !important;}
*[class=realign-left]{text-align:left !important}

*[class=mod10-img]{width:80px !important; height:auto !important;}
*[class=mod10-img-box]{min-width:130px !important;}

*[class=mob-h1-txt]{font-size:30px !important; line-height: 36px !important;} /* 36/48 */
*[class=mob-h1-txt-realign]{font-size:30px !important; line-height: 36px !important; text-align: left !important; } /* 36/48 */
*[class=mob-h1-txt-light]{font-size:30px !important; line-height: 36px !important; } /* 36/42 */
*[class=mob-h1-txt-xlight]{font-size:24px !important; line-height: 30px !important; text-align:center !important;} /* 36/42 */
*[class=mob-quote-txt]{font-size:24px !important; line-height: 36px !important;} /* 30/48 */
*[class=mob-h2-txt]{font-size:30px !important; line-height: 36px !important;} /* 30/36 */
*[class=mob-h3l-txt]{font-size:24px !important; line-height: 30px !important;} /* 26/30 */
*[class=mob-h3-txt]{font-size:21px !important; line-height: 25px !important;} /* 24/30 */
*[class=mob-h3a-txt]{font-size:9px !important; line-height: 13px !important;} /* 24/30 */
*[class=mob-h3d-txt]{font-size:28px !important; line-height: 28px !important;} /* 24/30 */
*[class=mob-h3-txt-light]{font-size:16px !important; line-height: 24px !important;} /* 24/30 */
*[class=mob-h4-txt]{font-size:21px !important; line-height: 24px !important;} /* 21/24 */
*[class=mob-subhead-txt]{font-size:13px !important; line-height: 18px !important;} /* 16/24 */
*[class=mob-regular-txt]{font-size:16px !important; line-height: 24px !important;} /* 18/24 */
*[class=mob-regular-txt-realign]{font-size:16px !important; line-height: 24px !important; text-align: left !important;} /* 18/24 */
*[class=mob-herocopy-txt]{font-size:16px !important; line-height: 21px !important;} /* 16/24 */
*[class=mob-boldcopy-txt]{font-size:16px !important; line-height: 21px !important; font-weight:bold !important;} /* 16/24 */
*[class=mob-boldcopy-txt-uc]{font-size:14px !important; line-height: 14px !important;} /* 16/24 */
*[class=mob-copy-txt]{font-size:16px !important; line-height: 20px !important;} /* 16/24 */
*[class=mob-copy-txt2]{font-size:16px !important; line-height: 20px !important;} /* 16/24 */
*[class=mob-copy-txt3]{font-size:10px !important; line-height: 14px !important;} /* 16/24 */

*[class=mob-foot-txt]{font-size:13px !important; line-height: 18px !important;} /* 14/18 */
*[class=mob-foot-txt-sb]{font-size:13px !important; line-height: 18px !important;} /* 14/18 */
*[class=mob-cta-txt]{font-size:14px !important; line-height: 14px !important;} /* 13/18 */
*[class=mob-cta-txtb]{font-size:12px !important; line-height: 12px !important;} /* 13/18 */
}
@media screen and (max-device-width: 379px), screen and (max-width: 379px) {
/*fluid styles*/
*[class=nav-minwidth]{min-width:18px !important;}
*[class=showmob]{display:block !important;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css" media="all">
tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#fafafa" notwebmail="fixit" style="min-width:100%;padding:0;margin:0;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Arial,sans-serif;background-color:#fafafa;">
<!--full wrapper-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fafafa" style="border-collapse:collapse; table-layout:fixed; margin:0 auto;"><tr><td align="center">
<!--preheader-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fafafa">
<tr>
<td align="center">
<!--spacer force width-->
<table width="700" border="0" cellspacing="0" cellpadding="0" class="nomob">
<tr>
<td width="700" height="1" style="min-width:638px;font-family:Arial,sans-serif;font-size:1px;line-height:1px;color:#ffffff;text-align:left;" class="nominwidth">
&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--header wrapper -->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fafafa" class="to100pc">
<tr>
<td align="center">

<table width="700" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="100%" height="24" valign="bottom" style="font-family:Arial,sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#a8a8a8; text-align:center" class="nomob-late">
Hello {{lead.First Name}}, <a style="color:#a8a8a8; text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">learn how Comcast recovered $65,000 in unused software licenses.</a>
</td>
</tr>
</table>
<!--spacer-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="5" style="font-size:1px; line-height:1px" class="h22">&nbsp;</td>
</tr>
</table>
<!--module 1 (Header Image & Nav Links)-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="100" style="font-size:1px; line-height:1px" class="w26">&nbsp;</td>
<td>
<table width="409" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" style="font-family:Arial,Helvetica,sans-serif; font-size:20px; line-height:22px; color:#fafafa;"><a style="color:#fafafa; text-decoration:none;" href="http://www.riverbed.com" target="_blank"><img border="0" src="https://pages.riverbed.com/rs/316-BPN-870/images/Riverbed-Comcast-409x100.jpg" alt="Riverbed" width="409" height="100" style="display:block;max-width:409px; max-height:100px; color:#202020;" class="mob-logo"/></a></td>
</tr>
</table>
</td>
</tr>
</table>

<table width="100" height="100" border="0" cellspacing="0" cellpadding="0" align="right" class="to100pc-late">
<tr>
<td width="100" height="100" valign="top" style="font-family:Arial,sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#a8a8a8; text-align:right" class="nomob-late">
<a style="color:#989898; text-decoration:none;" href="{{system.viewAsWebpageLink}}" target="_blank">View in Browser</a></td>
</tr>
</table>
</td>
<td width="1" height="100" style="font-size:1px; line-height:1px" class="w26">&nbsp;</td>
</tr>
</table>
<!--End module 1-->

<!--spacer-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="1" style="font-size:1px; line-height:1px" class="h22">&nbsp;</td>
</tr>
</table>

</td>
</tr>
</table>
<!--body wrapper -->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="to100pc">
<tr>
<td align="center">

<!--module 8 (Text & image - left/right/right/left)-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<!--Section 1 [repeatable element](Text left/image right - Large)-->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="to100pc">
<tr>
<td valign="top" align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td valign="top" style="text-align: center; vertical-align: top; font-size: 0;" class="tblock">
<div class="flip">
<!--[if mso |(IE)]><table align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="tblock">
<table width="350" height="312" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" class="to100pc" align="left">
<tr>
<td width="1" style="font-size:1px; line-height:1px" class="w38">&nbsp;</td>
<td valign="middle" align="center" height="312" style="overflow:hidden" class="overvisible">
<table width="300" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="300" height="20" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr><tr>
<td width="100%" valign="top" align="center" style="font-family:Arial,sans-serif;font-size:14px;line-height:18px;color:#4E4FA9;text-transform:uppercase;text-align:left" class="mob-subhead-txt"> <a style="color:#4E4FA9;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">RIVERBED WEBINAR FEATURING COMCAST</a></td>
</tr><tr>
<td width="300" height="4" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>

<tr>
<td width="100%" valign="top" align="left" style="font-size:1px;line-height:1px;color:#ffffff;text-align:left">
<table width="48" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="48" height="2" bgcolor="#4E4FA9" style="font-size:1px;line-height:2px;mso-line-height-rule:exactly;">&nbsp;</td>
</tr>
</table>
</td>
</tr>

<tr>
<td width="698" height="10" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr><tr>
<td width="100%" valign="top" align="left" style="font-family:Arial,sans-serif;font-size:30px;line-height:30px;color:#000000;text-align:left" class="mob-h3d-txt">
<a style="color:#000000;font-weight:bold;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Empower Your Data</a></td>
</tr>
<tr>
<td width="300" height="5" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td width="100%" valign="top" align="center" style="font-family:Arial,sans-serif;font-size:20px;line-height:22px;color:#000000;text-align:left" class="mob-copy-txt2">
<a style="color:#000000;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">How Comcast Uses Digital Experience Management for Optimal Performance</a></td>
</tr>
<tr>
<td width="300" height="10" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>

<tr>
<td width="100%" valign="top" align="center" style="font-family:Arial,sans-serif;font-size:16px;line-height:19px;color:#000000;text-align:left" class="mob-regular-txt-realign"><a style="color:#000000;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Wednesday, February 8, 2023</a></td>
</tr>
<tr>
<td width="100%" valign="top" align="center" style="font-family:Arial,sans-serif;font-size:16px;line-height:19px;color:#000000;text-align:left" class="mob-regular-txt-realign"><a style="color:#000000;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">10AM PT / 1PM ET</a></td>
</tr>
<tr>
<td width="300" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr><tr>
<td width="100%" valign="top" align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" bgcolor="#E10098" style="background-color:#E10098; border-radius: 20px; border: 2px solid #ffffff">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" style="font-size:1px; line-height:1px">&nbsp;</td>
<td valign="top" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial,sans-serif;font-size:16px;line-height:16px;color:#ffffff;text-align:center;text-transform:uppercase;font-weight:bold;white-space:nowrap" class="mob-cta-txt">
<a style="color:#ffffff;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">&nbsp;&nbsp;JOIN THE TALK {{LEAD.FIRST NAME}} &nbsp;&gt;
</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>
</td>
<td width="40" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><tr>
<td width="300" height="40" style="font-size:1px; line-height:1px"></td>
</tr>
</table>
</td>
<td width="1" style="font-size:1px; line-height:1px" class="w38">&nbsp;</td>
</tr>
</table>
</div>
<!--[if mso]></td><td><![endif]-->
<!--[if lt mso 16]><!-- -->
<div class="tblock">
<table width="350" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc">
<tr>
<td width="100%" valign="top" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;" width="350" class="to100pc">
<!--<![endif]-->
<a style="color:#ffffff; text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">
<img border="0" src="https://pages.riverbed.com/rs/316-BPN-870/images/empower_350x312.jpg" width="350" height="312" alt="Empower Your Data" style="display:block" class="to100pc"/></a>
<!--[if lt mso 16]><!-- -->
</td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--<![endif]-->
<!--[if mso |(IE)]></td></tr></table><![endif]-->
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end Section 1 [repeatable element]-->


</td>
</tr>
</table>
<!--end module 8-->



<!--module 3 (Primary Copy)-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<!--module main body-->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="to100pc">
<tr>
<td width="36" style="font-size:1px; line-height:1px" class="w14">&nbsp;</td>
<td valign="top" align="left">

<table width="680" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="100%" height="1" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td width="680" height="10" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td width="100%" style="font-family:Arial,sans-serif;font-size:20px;line-height:24px;color:#000000;font-weight:bold;text-align:left;text-transform:uppercase" class="mob-copy-txt">
<a style="color:#E10098;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Hello</a> {{lead.First Name}},
</td>
</tr><tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td width="100%" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt">Analyzing data is hard but analyzing millions of rows of data is even harder.</td>
</tr>

<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>

<tr>
<td width="100%" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt">If you could contextualize data across every enterprise endpoint, application, and transaction, you could strategically deploy your IT resources to improve the services you provide.</td>
</tr>

<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left;font-weight:bold" class="mob-h3-txt-static">Register now to hear from Riverbed Customer, Comcast, and Alluvio Aternity experts about:</td>
</tr><tr>
<td width="100%" height="1" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr><tr>
<td style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt">
<ul style="list-style-image:url('https://pages.riverbed.com/rs/316-BPN-870/images/bullet_whitebg_purple.jpg')">

<li style="padding-bottom:12px">How Comcast identified pain points and replaced low-performing computers with Alluvio Aternity</li>
<li style="padding-bottom:12px">Data analysis best practices</li>
<li style="padding-bottom:12px">Understanding resource consumption and how it impacts performance</li>
<li style="padding-bottom:1px">How to improve service performance for optimal employee experiences while reducing costs</li>
</ul>
</td>
</tr><tr>
<td width="100%" height="1" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td width="100%" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt">We look forward to you <a style="color:#E10098;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">joining us</a>.</td>
</tr><tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td width="100%" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt">
Sincerely,
</td>
</tr><tr>
<td width="100%" height="8" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr><tr>
<td width="100%" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt">
The Riverbed Team
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>

</table>

</td>
<td width="36" style="font-size:1px; line-height:1px" class="w14">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end module 3-->

<!--module 9 (two speakers)-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<!--module main body-->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="to100pc">
<tr>
<td width="36" style="font-size:1px; line-height:1px" class="w12">&nbsp;</td>
<td valign="top" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial,sans-serif;font-size:20px;line-height:24px;letter-spacing:-1px;color:#4E4FA9;text-align:center;font-weight:bold" class="mob-h3-txt">
<a style="color:#4E4FA9;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Meet Your Presenters</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="5" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" style="font-size:1px;line-height:1px;mso-line-height-rule:exactly; ">&nbsp;</td>
<td width="48" height="2" bgcolor="#4E4FA9" style="font-size:1px;line-height:1px;mso-line-height-rule:exactly;">&nbsp;</td>
<td height="1" style="font-size:1px;line-height:1px;mso-line-height-rule:exactly; ">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>
</td>
<td width="36" style="font-size:1px; line-height:1px" class="w12">&nbsp;</td>
</tr>
</table>

<table width="700" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="36" style="font-size:1px; line-height:1px">&nbsp;</td>
<td>
<table width="286" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc">
<tr>
<td valign="top" align="center">
<table width="276" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="72" valign="top" align="center">
<table width="72" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" style="font-family:Arial,sans-serif;color:#c0c0c0;font-size:16px;line-height:16px"> <table width="72" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" style="font-family:Arial,sans-serif;color:#c0c0c0;font-size:16px;line-height:16px">
<a style="color:#ffffff;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank"><img border="0" src="https://pages.riverbed.com/rs/316-BPN-870/images/Zach_Richardson_180x180.jpg" width="80" height="80" alt="Zach Richardson" style="display:block" /></a></td>
</tr>
</table></td>
</tr>
</table>
</td>
<td width="12" style="font-size:1px; line-height:1px">&nbsp;</td>
<td valign="middle" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left;font-weight:bold" class="mob-regular-txt-static">
<a style="color:#000000;text-decoration:none;font-weight:bold" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Zach Richardson</a>
</td>
</tr><tr>
<td width="100%" valign="top" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt-static">
<a style="color:#000000;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Sr. IT Manager<br>West Division<br>Comcast</a>
</td>
</tr><tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="36" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc">
<tr>
<td width="100%" height="36" style="font-size:1px; line-height:1px" class="h2">&nbsp;</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="286" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc">
<tr>
<td valign="top" align="center">
<table width="276" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="72" valign="top" align="center">
<table width="72" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" style="font-family:Arial,sans-serif;color:#c0c0c0;font-size:16px;line-height:16px">
<a style="color:#ffffff;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank"><img border="0" src="https://pages.riverbed.com/rs/316-BPN-870/images/Thomas_Telligman_180x180.jpg" width="80" height="80" alt="Thomas Telligman" style="display:block" /></a></td>
</tr>
</table>
</td>
<td width="12" style="font-size:1px; line-height:1px">&nbsp;</td>
<td valign="middle" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left;font-weight:bold" class="mob-regular-txt-static">
<a style="color:#000000;text-decoration:none;font-weight:bold" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Thomas Telligman</a>
</td>
</tr><tr>
<td width="100%" valign="top" style="font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#000000;text-align:left" class="mob-copy-txt-static">
<a style="color:#000000;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank">Consulting Solutions Architect<br>Riverbed</a>
</td>
</tr><tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="36" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
<tr>
<td height="18" style="font-size:1px; line-height:1px">&nbsp;</td>
<td height="18" style="font-size:1px; line-height:1px">&nbsp;</td>
<td height="18" style="font-size:1px; line-height:1px">&nbsp;</td>
<!--[if mso]><td style="font-size:1px;line-height:1px">&nbsp;</td><![endif]-->
<!--[if mso]><td style="font-size:1px;line-height:1px">&nbsp;</td><![endif]-->
<!--[if mso]><td style="font-size:1px;line-height:1px">&nbsp;</td><![endif]-->
<!--[if mso]><td style="font-size:1px;line-height:1px">&nbsp;</td><![endif]-->
</tr>
</table>
</td>
</tr>
</table>
<!--end module 9-->

<!--module 5 (Hero image + text)-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<!--module main body-->
<table width="700" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4E4FA9" style="background-image: linear-gradient(45deg, #4E4FA9, #A831D6, #E10098, #FE7351);">
<tr>
<td width="36" style="font-size:1px; line-height:1px" class="w22">&nbsp;</td>
<td valign="middle" align="center">


<table width="700" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="700" height="20" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>

<tr>
<td style="font-family:Arial,sans-serif;font-size:16px;line-height:16px;color:#ffffff;text-align:center;text-transform:uppercase;font-weight:bold;white-space:nowrap" class="mob-cta-txtb">
<a style="color:#ffffff;text-decoration:none;" href="https://pages.riverbed.com/webinar-empower-your-data-amer.html?utm_campaign=dem&utm_medium=marketo&utm_source=promo&utm_keyword=email1amerhalfimage" target="_blank"><strong>UNABLE TO ATTEND? REGISTER TO RECEIVE THE ONDEMAND WEBINAR.</strong></a>
</td>
</tr>
<tr>
<td width="700" height="20" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>

</td>
<td width="36" style="font-size:1px; line-height:1px" class="w22">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end module 5-->

</td>
</tr>
</table>

<!--spacer-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="32" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>

<!--module 7 (Social)-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="100%" valign="top" align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0" class="to100pc">
<tr>
<td width="246" style="font-size:1px; line-height:1px;" class="w16">&nbsp;</td>
<td align="center" valign="top">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="font-size:1px; line-height:1px;text-align:center;">
<table width="208" align="center" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="44" style="font-family:Arial,sans-serif;font-size:18px; line-height:24px;color:#A8ACA1;">
<a style="color:#A8ACA1; text-decoration:none;" href="https://www.linkedin.com/company/riverbed-technology" target="_blank"><img style="display:block;color:#A8ACA1;" border="0" src="https://www.riverbed.com/image/email/amer/socialicons/linkedin.jpg" width="44" height="44" alt="LinkedIn"/></a></td>

<td width="10" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td width="44" style="font-family:Arial,sans-serif;font-size:18px; line-height:24px;color:#A8ACA1;">
<a style="color:#A8ACA1; text-decoration:none;" href="http://twitter.com/RIVERBED" target="_blank"><img style="display:block;color:#A8ACA1;" border="0" src="https://www.riverbed.com/image/email/amer/socialicons/twitter.jpg" width="44" height="44" alt="Twitter"/></a></td>
<td width="10" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td width="44" style="font-family:Arial,sans-serif;font-size:18px; line-height:24px;color:#A8ACA1;">
<a style="color:#A8ACA1; text-decoration:none;" href="http://www.facebook.com/riverbed" target="_blank"><img style="display:block;color:#A8ACA1;" border="0" src="https://www.riverbed.com/image/email/amer/socialicons/facebook.jpg" width="44" height="44" alt="Facebook"/></a></td>
<td width="10" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td width="44" style="font-family:Arial,sans-serif;font-size:18px; line-height:24px;color:#A8ACA1;">
<a style="color:#A8ACA1; text-decoration:none;" href="https://www.instagram.com/riverbedtechnology/" target="_blank"><img style="display:block;color:#A8ACA1;" border="0" src="https://www.riverbed.com/image/email/amer/socialicons/instagram2.jpg" width="44" height="44" alt="Google"/></a></td>
</tr></table>
</td>
</tr>
</table>
</td>
<td width="246" style="font-size:1px; line-height:1px;" class="w16">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
<!--End module 7-->


<!--spacer-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="1" style="font-size:1px; line-height:1px">&nbsp;</td>
</tr>
</table>



</td>
</tr>
</table>
<!--End main body wrapper-->

<!-- module 8 (Footer) -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="to100pc">
<tr>
<td width="1" style="font-size:1px; line-height:1px;" class="w26">&nbsp;</td>
<td align="center">
<table width="698" border="0" cellspacing="0" cellpadding="0" align="center" class="to100pc">
<tr>
<td height="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr><tr>
<td width="100%" align="center" valign="middle" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif;color:#A8ACA1;" class="mob-foot-txt"><a style="color:#A8ACA1; text-decoration:none;" href="https://www.riverbed.com/contact" target="_blank"><span style="color:#A8ACA1;text-decoration:none">&copy;2023 Riverbed Technology. <span style="font-size:1px; line-height:1px;display:none" class="showmob">&nbsp;</span> All rights reserved.</span></a></td>
</tr><tr>
<td height="6" style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr><tr>
<td width="100%" align="center" valign="middle" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif;color:#A8ACA1;" class="mob-foot-txt"><a style="color:#A8ACA1; text-decoration:none;" href="https://www.riverbed.com/contact" target="_blank"><span style="color:#A8ACA1;text-decoration:none">Riverbed, 680 Folsom St., San Francisco, CA 94107, USA</span></a></td>
</tr>
<tr>
<td height="6" style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr>
<tr>
<td width="100%" align="center" valign="middle" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif;color:#A8ACA1;" class="mob-foot-txt"><a style="color:#A8ACA1; text-decoration:none;" href="https://www.riverbed.com/contact" target="_blank"><span style="color:#A8ACA1;text-decoration:none">Contact Us | <span style="font-size:1px; line-height:1px;display:none" class="showmob">&nbsp;</span>1-877-483-7233 (Sales)</span></a></td>
</tr><tr>
<td height="18" style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr><tr>
<td align="center" style="font-size:1px; line-height:1px;">
<table width="360" border="0" cellspacing="0" cellpadding="0" align="center" class="to100pc-late">
<tr><td width="100%">
<table width="100" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">
<tr>
<td width="100%" align="center" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif; color:#A8ACA1;" class="mob-foot-txt-sb">
<a href="https://www.riverbed.com/file/documents/riverbed-privacy-policy" target="_blank" style="text-decoration:none;"><span style="color:#A8ACA1">Privacy Policy</span></a>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="10" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">
<tr>
<td height="12" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td width="100%" align="center" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif; color:#A8ACA1;" class="nomob-late"> | </td>
<td height="12" style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="90" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">
<tr>
<td width="100%" align="center" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif; color:#A8ACA1;" class="mob-foot-txt-sb">
<a href="https://www.riverbed.com/legal/legal-notices" target="_blank" style="text-decoration:none;"><span style="color:#A8ACA1">Legal Notice</span></a>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="10" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">
<tr>
<td height="12" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td width="100%" align="center" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif; color:#A8ACA1;" class="nomob-late"> | </td>
<td height="12" style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" class="to100pc-late">
<tr>
<td width="100%" align="center" style="font-size:14px;line-height:18px;font-family:Arial,sans-serif; color:#A8ACA1;" class="mob-foot-txt-sb">
<a href="https://pages.riverbed.com/preference-center.html" target="_blank" style="text-decoration:none;"><span style="color:#A8ACA1">Manage Subscriptions</span></a></td>
</tr>
</table>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
<td width="1" style="font-size:1px; line-height:1px;" class="w26">&nbsp;</td>
</tr><tr>
<td height="42" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td style="font-size:1px; line-height:1px;">&nbsp;</td>
<td style="font-size:1px; line-height:1px;">&nbsp;</td>
</tr>
</table>
</td></tr></table>

</body>
</html>

 

0 Likes
747
Reply
3 REPLIES 3
Dave_Roberts
Level 10
Level 10
‎02-16-2023 10:54 PM
‎02-16-2023 10:54 PM

Re: Responsive Code Not Rendering Properly in Office 365 on Mac OS

Hey Jill,

 

This looks like a tough one! It's been a few years since I dug deep into email code so I'm not up-to-par with the current environment but there are a few things that stood out to me when I read thru the code and I've got a few ideas you might try to troubleshoot this a little bit.

 

---------------
1. MSO stuff:

---------------

If you haven't updated the code in a few years it might be that the MSO version targeting is what's messing things up?

In a few places I see that you're using 

<!--[if lt mso 16]><!-- -->

"If less-than MSO 16" -- this might be an issue b/c I think o365 is considered "mso 16". 

 

I found this article on a Litmus blog :

Dave_Roberts_0-1676615507779.png

 

Again, it's been a while for me, but what I'm used to seeing for the MSO stuff actually goes the other way (greater than) to help future-proof the code in consideration of newer versions of Outlook.

<!--[if gte mso 9]> -->

"If greater than mso 9"


More info on MSO: https://stackoverflow.design/email/base/mso/

 

------------------------

2. Viewport settings

------------------------

Another thing that stood out and might be correlated to this issue could be the viewport settings?
It looks like you've got a combo of <meta> and CSS:

<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
...
<style>
@-ms-viewport { width: device-width; }
</style>

and I'm used to seeing something more like:

<meta name="viewport" content="width=device-width" />

I don't know if the scale settings you've got in there might impact the render or not, but maybe there's something about that line of CSS or the viewport meta tag content="" attribute that's not gellin' with o365 on Mac OS?

 

---------------------

3. Media Queries

---------------------

The last thing I noticed was the media queries you're using. I'm not as familiar with the "device-width" so that stood out to me, I did a quick Google search and it looks like that's been depreciated, so maybe that has something to do with it?

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width
Maybe try changing:

@media screen and (max-device-width: 699px), screen and (max-width: 699px) {...}

 to something more like:

@media only screen and (max-width: 699px) {...}

I've got my doubts about this having anything to do with it b/c it sounds like you're seeing the issue on a desktop but thought I'd mention it b/c it stood out as something I haven't seen before. 

 

 

Other than that, Im fresh out of ideas here -- let me know if any of that worked out for you or made any difference in the renders you're seeing in your inbox? Good luck!

-Dave

728
Reply
Jasbir_Kaur
Level 5
Level 5
‎02-20-2023 03:06 AM
‎02-20-2023 03:06 AM

Re: Responsive Code Not Rendering Properly in Office 365 on Mac OS

Hi @Jill_Harrison1,

 

I completely agree with the @Dave_Roberts points.

 

I am working on the email from a long time, you should have to update your code.

 

Thanks!

Jasbir

0 Likes
703
Reply
Jill_Harrison1
Level 1
Level 1
‎02-21-2023 10:53 AM
‎02-21-2023 10:53 AM

Re: Responsive Code Not Rendering Properly in Office 365 on Mac OS

Thank you for taking the time to review my code @Dave_Roberts , I really appreciate it.

I tried all of your suggestions, but the stacking issue remains.

My next step is to go back to the original developer with your comments to see if he can update to the code.

0 Likes
680
Reply
Home