Issues with Outlook and img width/max-width?

Hi all,

I'm building a responsive email template where a particular image should display larger in the mobile view than it does in the desktop view. As such, I've linked to an image that is the correct size for my mobile view and used img width/max-width to state what size the image should be in the desktop view.

This is working fine in all my common browsers, except of course, Outlook 2007 and 2010. With images on, this particular image renders too wide for the table it is placed in and the layout breaks in both versions of Outlook. With images off, the layout works.

I've been wondering if Outlook ignores my width setting and is rendering the image at its full size. I'm yet to look further into the effects of padding and run my code through a validator so there could be something else causing this issue, but I just thought I'd check first to see if anyone had experienced this issue before? If so, do you know if there are any workarounds?

roshodgekiss roshodgekiss, 3 years ago

Hi there Cheli, it's funny you mention this - we're actually in the process of updating our Guide to CSS Support in Email and one of the things we focused on this time around was max-width and min-width support. Sadly, the outcome of our tests was that Outlook 2007+ do not support these CSS properties, so that may put a spanner in the works.

What you could possibly experiment with is giving your image a % width (eg. 100%) and placing it in a container table/cell that scales accordingly. Sadly, max-width and min-width aren't going to be your allies in this instance. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Cheli, 3 years ago

Outlook proves just how accommodating it can be *sigh*!

Thanks for the reply Ros, I thought I'd checked the support for width but obviously that was just an assumption on my part, because I'm a big fan of your CSS support table!

I think I hadn't noticed this before because previous designs I've worked on have a larger image in desktop view that scales down in the mobile version. In this case I wanted to scale up in the mobile version. I imagine the only way to get around that is to overscale the desktop version image which drops its resolution, or loading a higher resolution image in the first place, which probably isn't best practice from a file download perspective, is it?

roshodgekiss roshodgekiss, 3 years ago

I imagine the only way to get around that is to overscale the desktop version image which drops its resolution, or loading a higher resolution image in the first place, which probably isn't best practice from a file download perspective, is it?

Actually, using a higher-res image isn't a bad idea - it's what we recommend in our guide, actually :) It looks like we might be making some changes to the email editor to make this process a bit easier to implement, so we'll be in touch if we have an app update which may help you in this regard. In the interim, I think you'll find the guide fairly useful. :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Cheli, 3 years ago

Ros, you're too good to me :)

roshodgekiss roshodgekiss, 3 years ago

Anything for you, Cheli - you're a true email warrior :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
roshodgekiss roshodgekiss, 3 years ago

Oh, one thing, a cool customer just pointed out that you can use conditional comments to target Outlook. Instead of giving an image a fluid width or one that potentially wrecks the layout width, you can do something like the following:

<!--[if gte mso 9]>
<style type="text/css">
img.header { width: 600px; } /* or something like that */
</style>
<![endif]-->

One to think about for anyone who comes across the same issue :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098