Recent searches
No recent searches
Logo image to large on email templates
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 comments
Dave Dyson
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
Patrick Lieu
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
Dave Dyson
Glad to hear it, Patrick!
0