Media Queries with Outlook email

I am doing a responsive email where I can move the images if the email is being viewed on mobile.Everything looks great except in Outlook. It is displaying it in both places. I read that outlook does not recognize the “display:none” code. Is there anything else that can be done?

Here is what I have my code looking like and its working on everything but outlook.

Media Query Code

 @media only screen and (max-device-width: 479px) {
                #mobile {display:block}
                #desktop {display:none;mso-hide: all;}


        }

@media only screen and (min-device-width: 480px) {
                #mobile {display:none;mso-hide: all;}
                #desktop {display:block}

}
        }

And here is the html I am using.

<table id="mobile" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="top" align="right" class="hisrc">
                                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;">
                                    <img src="vna-logo.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px;" class="deviceWidth" />


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

 <table id="desktop" align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="top" align="right" class="hisrc">
                                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;">
                                    <img src="vna-logo-2.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px;" class="deviceWidth" />


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

I was able to get it working with text but not images. The images are showing up in both places.

Unfortunately, when it comes to email, best HTML/CSS practices for the web do not translate well at all to email. There are dozens of mail clients and webmail providers out there, and none of them are standardized and/or support any of the latest and greatest CSS and HTML standards. Each one of them supports HTML and CSS to differing degrees, some strip out @media tags, and some even strip out linked CSS files. Some don’t even read HTML/CSS at all, so you have to include a plain text version of your email along with your HTML version.

You basically have to treat email like you are writing code in 1996 using tables and sliced images for layout. It certainly isn’t pretty.

On the other hand, if this is for a newsletter, you can email a short blurb with a link to a page on your website to get around the HTML/CSS issues of email.

I got it to work on everything but the outlook email client. Dont understand how the text is working but the images using the same code is not.

Most email clients don’t recognize @media, so don’t rely too much on it. Use it for enhancements. Here’s a handy guide to what is supported in emails:

(The PDF download is more specific about what’s supported, including which clients support @media—simply called ‘responsive’ on the web page.)

Hi,

The only way to solve this is by trying things out but as I don’t have outlook I can’t test for you so you will need to have a play around with the following.

Try setting the widths on those two nested tables in px rather than percent and make sure they add up to less than the available width.

However I would suggest that rather than having a one celled table width two nested tables inside you would have been better of with a two cell table and the image and text could not fail to be side by side then.


<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
								<tr>
										<td><table width="48%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
														<tr>
																<td><a href="http://playmakercrm.com/demo/"><img width="295" src="http://playmakercrm.com/email/2014/2/pm-screen.png" alt="" border="0" style="border-radius: 4px; display: block;padding-top:80px" class="deviceWidth" /></a></td>
														</tr>
												</table>
												<table width="50%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
														<tr>
																<td><p style="font-size: 28px; color: #ab1620; font-weight: normal; text-align: left; line-height:34px; font-family: Helvetica, sans-serif; margin:-3px 0">~Contact.FirstName~,</p>
																		<p style="font-size: 31px; color: #ab1620; font-weight: normal; text-align: left; line-height:34px; font-family: Helvetica, sans-serif; margin:-3px 0">Here&#8217;s the proven tool to grow your referrals and profits!</p>
																		<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Stop guessing and start growing with PlayMaker CRM's TargetWatch, the must-have tool to immediately identify and target the top referring physicians and facilities in your market.</p>
																		<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">With TargetWatch, high-value referral sources are easier to identify, target and monitor in real-time to rapidly take your referrals to another level.</p>
																		<p style="font-size: 14px; color: #191a1d; font-weight: bold; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Don&#8217;t wait&#8230; dominate your market now. Contact us today for your free demo.</p></td>
														</tr>
												</table></td>
								</tr>
						</table>

Change the above to a two celled table instead of nested tables and it should work out of the box.
e.g. something like:


<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
		<tr>
				<td width="48%" class="deviceWidth" align="left"><a href="http://playmakercrm.com/demo/"><img width="295" src="http://playmakercrm.com/email/2014/2/pm-screen.png" alt="" border="0" style="border-radius: 4px; display: block;padding-top:80px" class="deviceWidth" /></a></td>
				<td align="right" class="deviceWidth"><p style="font-size: 28px; color: #ab1620; font-weight: normal; text-align: left; line-height:34px; font-family: Helvetica, sans-serif; margin:-3px 0">~Contact.FirstName~,</p>
						<p style="font-size: 31px; color: #ab1620; font-weight: normal; text-align: left; line-height:34px; font-family: Helvetica, sans-serif; margin:-3px 0">Here&#8217;s the proven tool to grow your referrals and profits!</p>
						<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Stop guessing and start growing with PlayMaker CRM's TargetWatch, the must-have tool to immediately identify and target the top referring physicians and facilities in your market.</p>
						<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">With TargetWatch, high-value referral sources are easier to identify, target and monitor in real-time to rapidly take your referrals to another level.</p>
						<p style="font-size: 14px; color: #191a1d; font-weight: bold; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Don&#8217;t wait&#8230; dominate your market now. Contact us today for your free demo.</p></td>
						</td>
		</tr>
</table>

If that doesn’t work then pull that table section out into a page of its own and test again to see whether the problem is really with that section as it may be some other construct that is causing the issue.

It’s a case of narrowing things down which is hard to do without the client you want to test in.