Logo image to large on email templates

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>

Dave Dyson

15 de septiembre de 2021 03:01

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?

Patrick Lieu

15 de septiembre de 2021 09:40

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.

16 de septiembre de 2021 00:12

Glad to hear it, Patrick!

Logo image to large on email templates

3 Comentarios

¿No encontró lo que buscaba?