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.
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.
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 inboxesfeature.
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.
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 inboxesfeature.