Marketing email content alignment

SOLVE
Visitor

Hi all,

 

I am a pretty rookie coder looking to make some adjustments to how my emails show-up for the recipient. My goal is to remove the padding/margin in between the top and left portions of my email to make it more closely resemble a 1-to-1 communication vs. a marketing email.

 

Appreciate any help the community can offer!

 

AndrewPicture1.png 

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Esteemed Advisor

@atagher,

You will want to use your browsers inspector tool. Chrome can be accessed with the hotkeys win: CTL+Shift+i mac: CMD+opt+i


Use the element selector (top left of console, little square button) to find out what is causing the spacing. If you hover over the main content area and the space you are trying to remove becomes orange then it is margin, if green then it is padding. If you can't find it using the element selector than you can get the same effect by hoving over the html in the html section of the console but you may have to un-nest the html.  

 

You can edit the css in the css panel. It doesn't actually change the site css, just the current loaded version of the page. once you find the element responsible for the spacing you can change the css on the page to ensure you are getting the effect you want. Once you are happy you can just copy and paste the css over to the head of your email. 

 

There are a few things that could be causing the spacing including the fact that emails are built using html tables so without seeing the email in my browser I am not able to give a specific answer. I hope this helps. 

- Jonathan Sumner
Highlighted
Regular Contributor

Hey @atagher, in follow up to @Jsum's advice I wanted to share some resources I've frequently used when it comes to optimizing HTML emails for Outlook. Unfortunately this email client can be a nightmare to design for.

 

Each individual email client (ie. Outlook) renders emails based on their own CSS/HTML standards that may change over time. HubSpot recommends designing email templates with their built-in template builder for greater consistency across email clients and utilizing the Preview in other inboxes feature.

 

Depending on the nature and complexity of the HTML content you are adding into the rich text modules, there will be more discrepancies in Outlook. To troubleshoot some of the common issues see: Why are margins and padding around my image not rendering in Outlook?, Why is the spacing different in Outlook versus other email clients?

 

I hope the above is helpful! Smiley Happy

2 Replies 2
Esteemed Advisor

@atagher,

You will want to use your browsers inspector tool. Chrome can be accessed with the hotkeys win: CTL+Shift+i mac: CMD+opt+i


Use the element selector (top left of console, little square button) to find out what is causing the spacing. If you hover over the main content area and the space you are trying to remove becomes orange then it is margin, if green then it is padding. If you can't find it using the element selector than you can get the same effect by hoving over the html in the html section of the console but you may have to un-nest the html.  

 

You can edit the css in the css panel. It doesn't actually change the site css, just the current loaded version of the page. once you find the element responsible for the spacing you can change the css on the page to ensure you are getting the effect you want. Once you are happy you can just copy and paste the css over to the head of your email. 

 

There are a few things that could be causing the spacing including the fact that emails are built using html tables so without seeing the email in my browser I am not able to give a specific answer. I hope this helps. 

- Jonathan Sumner
Highlighted
Regular Contributor

Hey @atagher, in follow up to @Jsum's advice I wanted to share some resources I've frequently used when it comes to optimizing HTML emails for Outlook. Unfortunately this email client can be a nightmare to design for.

 

Each individual email client (ie. Outlook) renders emails based on their own CSS/HTML standards that may change over time. HubSpot recommends designing email templates with their built-in template builder for greater consistency across email clients and utilizing the Preview in other inboxes feature.

 

Depending on the nature and complexity of the HTML content you are adding into the rich text modules, there will be more discrepancies in Outlook. To troubleshoot some of the common issues see: Why are margins and padding around my image not rendering in Outlook?, Why is the spacing different in Outlook versus other email clients?

 

I hope the above is helpful! Smiley Happy