Skip to main content
chrisa90912733
Inspiring
January 26, 2019
Answered

images not full width in outlook

  • January 26, 2019
  • 2 replies
  • 4238 views

I'm building a html email and for the most part it's going well but there are two images (the ones with the alt tag "doesn't reach" in the code) that I can't get to show as the same width as the rest of the white sections even though they show correctly in a regular browser. Any ideas ?

A screenshot and the code is below

Dropbox - test.html

This topic has been closed for replies.
Correct answer ALsp

We compose email newsletters all the time. Jut like a normal web page, you need to prioritize the coding for certain devices first - the equivalent of dong a web page mobile-first, for instance. Here's some tips based on what we've found over the years:

Never use tables.

Never use style tags.

All CSS should be inline, on the actual markup tags.

The result is that our emails are perfect in most online mail viewers, and always perfect in Thunderbird (Mozilla's desktop email client).

Here is an example of one of our mails:

News from PVII

2 replies

Nancy OShea
Community Expert
Community Expert
January 26, 2019

I don't have Outlook so I'm flying in the dark.

<td style="padding: 0px; font-family: sans-serif; font-size: 20px; color: #555555; background-color:white; border:none"><img src="https://dummyimage.com/680x75" alt="doesn't reach" style="width: 100%; max-width: 680px; height: auto;"></td>

Nancy O'Shea— Product User & Community Expert
ALsp
ALspCorrect answer
Legend
January 26, 2019

We compose email newsletters all the time. Jut like a normal web page, you need to prioritize the coding for certain devices first - the equivalent of dong a web page mobile-first, for instance. Here's some tips based on what we've found over the years:

Never use tables.

Never use style tags.

All CSS should be inline, on the actual markup tags.

The result is that our emails are perfect in most online mail viewers, and always perfect in Thunderbird (Mozilla's desktop email client).

Here is an example of one of our mails:

News from PVII

chrisa90912733
Inspiring
January 26, 2019

Thing is that the rest of the code works absolutely fine on devices and in other desktop apps. Even have a background image showing fine in outlook. It just doesn't make sense that the image is not flush as it should be.

ALsp
Legend
January 26, 2019

Actually, it makes perfect sense. Outlook is not a browser. It is a desktop email client, and one that offers very little in the way of support for CSS standards. The good news is that unless you have a very unusual market, the vast majority of your audience will not be using Outlook.. For those who are, simply follow the recommendations I gave you.

That's just the way it is, and I'm afraid it is not really an arguable issue.

Now, tell me what happens in a desktop browser viewing your page when you make the window narrow?