Need help for webkit bug fix in responsive email - outlook

Question

My template looks responsive in Litmus' gmail versions, but is actually isn't, even though I am not using attribute selectors and my webkit fix is on the div tag. I'm also getting a major shift on Outlook 2016. I'm sure the error is minor but I can't find it. Thanks.
Here's my body tag:
CSS:
#media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
HTML:
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="308"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans', arial, sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><span>CTA</span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
Here are screen shots of how it lays correctly vs the entire body shift. Also, the responsive fix which appears correctly.
correct display
shifted
responsive display

Answer 1

Regarding Gmail, I'm guessing you might be using a mobile Gmail app (iOS or Android) with a non Gmail account (like an Outlook.com email address for example). This specific case, often referred to as GANGA (for Gmail Apps with Non Gmail Accounts), doesn't support <style> tags and thus media queries (as reported on Can I email). In order to get your email to work in GANGA, you must code it with a fluid/hybrid or mobile first approach so that the layout can work even without media queries.
As for Outlook, I'm not sure what major shift you're referring to. One thing I see though is that your code is not ready for Outlook at 120 dpi rendering, and that could be part of your issue. As documented here, to get a good rendering in Outlook at 120dpi, you need to:
Add the xmlns:o="urn:schemas-microsoft-com:office:office" namespace in your <html> tag.
Add the <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--> declaration in your <head>.
Use the width property in CSS instead of the width attribute in HTML.
Use the width attribute on image elements with the desired width for Outlook. (Here your image is set at width="308" while it should only be displayed at 154px in Outlook on desktop. So it should be width="154" instead).
Here’s a full email code I adjusted and tests.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Need help for webkit bug fix in responsive email</title>
<style>
#media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px; margin:0 auto;" align="center">
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="154"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans', arial, sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><span>CTA</span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
You can find a test run for this code on Email on Acid here.