Email Banner Preview Image stretched | Community
Skip to main content
S
sniyengar
New Participant
February 9, 2022
Question

Email Banner Preview Image stretched

  • February 9, 2022
  • 1 reply
  • 4770 views

This has happened a couple of times now - I will send a preview email to my test list. 

Depending on the mail client they use, they will either see the images stretched or fine. 

 

IE Gmail client - the banner looks stretched

Outlook, Apple Mail - they are fine. 

 

doesn't matter if you are looking on the phone or not.  Has anyone else had any issues with this.  I don't want to send an email drip hoping it will look good for everyone.  

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
February 9, 2022

You’ll need to provide the relevant part of your HTML (please don’t post the whole email as that won’t be necessary, just an HTML fragment that’s sufficient to reproduce the problem).

 

It’s not possible to troubleshoot email design without seeing HTML, just as it would be impossible to troubleshoot a full-fledged web page without HTML & CSS.

S
sniyengarAuthor
New Participant
February 9, 2022

thanks for this - That's the thing - I'm not sure if you can reproduce it based on the html as it looks fine. 

 

Here are the images that we are seeing in the gmail client - and then the other email clients (yahoo, outlook, apple mail) 

 

I put in the original banner graphic as well for reference. 

 



This is the banner html. if that helps

<table class="mktoModule" id="ImageModule" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%"> <tbody> <tr> <td bgcolor="#ffffff" valign="top" style="background-color:#ffffff;vertical-align: top;"> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0px;border-collapse: collapse;margin: 0 auto;"> <tbody> <tr> <td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td> </tr> <tr> <td class="fullWid center" align="center" style="text-align: center; font-size: 1px; line-height: 1px;"> <div class="mktoImg" id="Image1" mktolockimgsize="false"> <a href="https://f.hubspotusercontent10.net/hubfs/2154116/February%202022%20Grokker%20Workforce%20Wellbeing%20Engagement%20Playbook%20(1).pdf" target="_blank"><img src="https://info.grokker.com/rs/743-AWQ-437/images/FEB - Workforce Wellbeing - Email Header.jpg" width="2875" height="1126" alt="FEB - Workforce Wellbeing - Email Header.jpg" style="-ms-interpolation-mode:bicubic; border-collapse:collapse; width:100%; padding:0px; margin:0px auto; border-spacing:0;max-width:100%;" /></a> </div> </td> </tr> <tr> <td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>

 

Jo_Pitts1
Jo_Pitts1
Community Manager
February 9, 2022

At a very quick glance, you've probably got contention between the height and width HTML attributes, and the width=100% in the style.

 

Some other issues I've picked up on:

  • Your image is MASSIVE.. way bigger than you need for your email header.  That's not good practise from a performance  and UX perspective. 
  • You're also still pulling it from your old platform.  That'll work for now, but if you shut down your account with them, it may not continue to do so.

 

Also, when pasting code, please use the code highlighter

It makes it much more readable... like this.

 

<table class="mktoModule" id="ImageModule" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%"> <tbody> <tr> <td bgcolor="#ffffff" valign="top" style="background-color:#ffffff;vertical-align: top;"> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0px;border-collapse: collapse;margin: 0 auto;"> <tbody> <tr> <td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td> </tr> <tr> <td class="fullWid center" align="center" style="text-align: center; font-size: 1px; line-height: 1px;"> <div class="mktoImg" id="Image1" mktolockimgsize="false"> <a href="https://f.hubspotusercontent10.net/hubfs/2154116/February%202022%20Grokker%20Workforce%20Wellbeing%2..." target="_blank"><img src="https://info.grokker.com/rs/743-AWQ-437/images/FEB - Workforce Wellbeing - Email Header.jpg" width="2875" height="1126" alt="FEB - Workforce Wellbeing - Email Header.jpg" style="-ms-interpolation-mode:bicubic; border-collapse:collapse; width:100%; padding:0px; margin:0px auto; border-spacing:0;max-width:100%;" /></a> </div> </td> </tr> <tr> <td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>

 

 

Terms & ConditionsAccessibility statement

Loading footer...