images not full width in outlook

[chrisa90912733]

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

[ALsp · Accepted solution]

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]

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]

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?

[chrisa90912733]

it stays flush

[ALsp]

Post a link to a real test page.

[chrisa90912733]

code is in the dropbox link in the 1st post

[ALsp]

I don't want your code. I want to see an actual page online 🙂 That's the only way to do an empirical test. If not, anyone helping you is going to need to copy your code, create a document, and only then be able to give it a thorough test. Curious... how are you testing your work in Outlook? Are you sending yourself emails?

[chrisa90912733]

test is pretty simple: open a new mail > insert file > select html file > insert as text , no need to actually send

test page is here - http://emailteststite.epizy.com/test.html

[ALsp]

The code is a mess. HTML.com is not a good resource. If you are trying to do an HTML mailer, you need to simplify the code. Do you know how much of your market actually uses Outlook, or is this because you use it yourself? Have you conducted a good testing process, testing a basic structure, then adding to it? Have you checked not just in Outlook, but also with Thunderbird and online Google Mail?

Again, the best advice you are going to get can already be discovered in the link I provided and the original answer I gave you. Keep things simple, do not worry about multiple columns, use style attributes directly on the tags in your page instead of embedded in style blocks in the head of your document.

And lastly, ignore the articles that advise using tables, font tags, and other assorted archaic methods. Or completely ignore my advice, and do as you please. It's your choice. I do know that our emails work

[Nancy OShea]

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>