Marketing emails look different in Outlook

HubSpot email templates and emails created with the drag and drop editor are designed to be consistent and responsive across common email clients. You can also preview your email across email clients. Since Outlook offers limited support for CSS, you may see discrepancies in the way your email renders in Outlook. If you notice that email positioning or spacing looks wrong in Outlook, there are steps you can take to fix it. 

Please note: HubSpot Support cannot support custom coded email templates. If you're using a custom coded template, follow up with the provider who created the template. You can also connect with other HubSpot users and designers on the Community.

Centering images

If you image does not center in Outlook, you can adjust the HTML within the module source code.

• In your HubSpot account, navigate to Marketing > Email.
• Click the name of the email.
• In the rich text module with your image, click the source code icon code.
• Locate the code for the image you are trying to center that begins with <img>.
• Add <center> </center> or <p style="text-align: center;"> </p> tags around the <img> code. For example:

<center><img src="http://www.hubspot.com/test.jpg"></center>

<p style="text-align: center;"><img src="http://www.hubspot.com/test.jpg"></p>

Spacing

There are two methods for adjusting spacing around images in Outlook: using hspace or vspace, and using tables.

Using hspace and vspace

The HTML attribute vspace defines vertical space and will add equal spacing to the top and bottom of your image. The hspace attribute defines horizontal space and will add equal spacing to the right and left of your image.

• In your HubSpot account, navigate to Marketing > Email.

• Click the name of the email.

• Click into the content module, then click the source code icon code.

• At the end of the image code, add either or both of the following code: hspace="10" vspace="10", replacing 10 with the desired amount of spacing.

Using tables

Create a 3-column table to contain your image, spacing, and text.

• In your HubSpot account, navigate to Marketing > Email.

• Click the name of the email.

• In the rich text editor click Table > Insert Table. Create a 3x1 table.
  
  

• Click the source code icon code.

• Specify a width in the empty cell, such as <td width="10">, for the amount of spacing you would like between the image and text.

• Specify a font family, font size, font color, and line height such as style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" as Outlook will add its own styling when unspecified.

Learn more about email design on our Designers Community.