function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Heather_HansonHeather_Hanson 

custom email template alignment not working

I'm working on a custom classic email template using HTML and when I see the preview and when I test it in my browser, my alignment is good, but when I send a test email, the alignment is off.  

Any suggestions what I can do to resolve this?

Here is what it looks like in preview:
User-added image

Here is the email test:

User-added image
Here is a bit of my code:
<body style="font-family: Montserrat, sans-serif;">
<style>
	.progress{width: 80%; height: auto; margin:0 auto 0 auto; color: #404040; font-size: 14px; }
	.p{font: Montserrat, sans-serif; text-align: left; }
</style>

<table class="progress" cellpadding="2px">
	<tr>
		<td style="vertical-align: bottom; text-align: center;" >
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCE&oid=00DA0000000gd8G&lastMod=1581343779000" alt="orange-circle" height:20 ></td>
		<td style="">
			<p><strong>Site Survey Scheduled</strong></p>
		</td>
	</tr>

	<tr>
		<td style="vertical-align: top; text-align: center;">
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCJ&oid=00DA0000000gd8G&lastMod=1581343802000" alt="orange-line" height="120" ></td>
		<td style="vertical-align: top; font-size: 12px;">
			<p>Friday, February 7</p>
		</td>
	</tr>

	<tr>
		<td style="vertical-align: top; text-align: center;">
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCO&oid=00DA0000000gd8G&lastMod=1581343827000" alt="grey-circles" height="20" ></td>
		<td style="vertical-align: top;">
			<p><strong>Order Received</strong></p>
		</td>
	</tr>

	<tr>
		<td style="vertical-align: top; text-align: center;">
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCT&oid=00DA0000000gd8G&lastMod=1581343849000" alt="grey-lines" height="20" ></td>
		<td style="vertical-align: top;">
			<p></p>
		</td>
	</tr>

 
EuphoristeEuphoriste
Hello, 

I am not sure if it will work but did you try to put all your code in a Table ? 
Something like this : 
<center>
 <table>
  <tr>
   <td width="600">
    <div style="max-width:600px; margin:0 auto;">
 
       YOUR CODE
	
    </div>
   </td>
  </tr>
 </table>
</center>

Regards.
Sumit Kapoor 12Sumit Kapoor 12
Thanks alot! It really worked for me..
Regards
ttricks.com
Heather_HansonHeather_Hanson
That didn't seem to work for me.....maybe I didn't do it properly.  Do you mean to just wrap my entire code above in a table?
Heather_HansonHeather_Hanson
I put some border lines around the TDs as I find that helps me see what is going wrong and I noticed that even when I adjust the width to 100% it is not filling the screen of the email....any suggestions as to why that would be happening?  I think that may be why everything is getting pushed down..
User-added image
EuphoristeEuphoriste
Hello, Copy/Paste and try this : 
<body style="font-family: Montserrat, sans-serif;">
<style>
	.progress{width: 80%; height: auto; margin:0 auto 0 auto; color: #404040; font-size: 14px; }
	.p{font: Montserrat, sans-serif; text-align: left; }
</style>

<center>
 <table>
  <tr>
   <td width="50%">
    <center>
     <div style="margin:0 auto;">
 
<table class="progress" cellpadding="2px">
	<tr>
		<td style="vertical-align: bottom; text-align: center;" >
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCE&oid=00DA0000000gd8G&lastMod=1581343779000" alt="orange-circle" height:20 ></td>
		<td style="">
			<p><strong>Site Survey Scheduled</strong></p>
		</td>
	</tr>

	<tr>
		<td style="vertical-align: top; text-align: center;">
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCJ&oid=00DA0000000gd8G&lastMod=1581343802000" alt="orange-line" height="120" ></td>
		<td style="vertical-align: top; font-size: 12px;">
			<p>Friday, February 7</p>
		</td>
	</tr>

	<tr>
		<td style="vertical-align: top; text-align: center;">
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCO&oid=00DA0000000gd8G&lastMod=1581343827000" alt="grey-circles" height="20" ></td>
		<td style="vertical-align: top;">
			<p><strong>Order Received</strong></p>
		</td>
	</tr>

	<tr>
		<td style="vertical-align: top; text-align: center;">
			<img src="https://selectcomtelecom--c.na72.content.force.com/servlet/servlet.ImageServer?id=0151H0000085hCT&oid=00DA0000000gd8G&lastMod=1581343849000" alt="grey-lines" height="20" ></td>
		<td style="vertical-align: top;">
			<p></p>
		</td>
	</tr>
	
     </div>
    </center>
   </td>
  </tr>
 </table>
</center>

Regards.
Heather_HansonHeather_Hanson
Unfortunately, I copied and it still didn't make a difference..
EuphoristeEuphoriste
I tested it on Gmail and Outlook. 
I guess it is a mailbox problem

User-added image

User-added image
EuphoristeEuphoriste
Follow this link to access Salesforce knowledge Article regarding this kind of problem : 

 Email template does not display correctly in Outlook or other email clients (https://help.salesforce.com/articleView?id=000324370&type=1&mode=1)
Heather_HansonHeather_Hanson
It looks like you are having the same problem as me in your gmail actually!  See how Order Received is lower than the grey circle?  I'm using gmail too and that is what happens.  I tested in my hotmail and same result.  It looks like your Outlook looses the font-family which sounds like what part of that article is about.