Recent searches


No recent searches

Logo image to large on email templates

Answered


Posted Sep 15, 2021

Hi All,

A question to the HTML coding experts out there.

I'm currently trying to code our email template to insert our business' logo/banner at the top of each of email. I've managed to display this successfully across web based email platforms (ie viewing the email through a web browser), but unfortunately I'm now stuck as the logo/banner image appears way too large when viewing the email through outlook/other emailing apps.

Understand that there are already some exellent resourceswhich helped along the way:
https://support.zendesk.com/hc/en-us/articles/203663236-Customizing-your-templates-for-email-notifications#topic_ucy_3vc_x3 
but unfortunately don't address the issue I'm encountering at the moment.
Any and all help would be appreciated!

For reference, this is the current code I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table td {
border-collapse: collapse;
}
{{styles}}
.bordered {
width: 95%;
padding: 10px;
border: 5px solid #C5C4C0;
}
</style>
</head>

<div class="bordered">

<body {{attributes}} style="width: 100%!important; margin: 0; padding: 0;">
<div>
<table style= background-color:#FFB81C;width:100%>
<tbody>
<tr>
<td style="text-align:center" align="center" valign="middle">
<img src="LOGO.png" alt="Logo" style=height: 100px;>
</td>
</tr>
</tbody>
</table>
</div>

<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
<div style="color: #FFFFFF;">{{delimiter}}</div>
{{content}}
</div>

</body>
</div>
<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color: #FFFFFF">
{{footer}}
</div>

</html>

0

3

3 comments

Hi Patrick,

I haven't verified that this works, but I found this technique that might be worth trying: A Slick, New Image Swapping Technique for Responsive Emails

Can you let me know if that works?

0


Hi Dave,

Thanks for the suggestion - I've managed to resolve this myself.

The image i was referencing was simply too large and outlook doesn't recognice 'height = 100px'. 

Thank you for your support, you can close the ticket.

1


Glad to hear it, Patrick!

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post