CMS Development

fabianpimminger
Member

Drag and Drop E-Mails: Change side padding and Width

Hi, 

 

I'm currently working on a drag and drop e-mail and was wondering if there is a possibility to change the padding on the side and the page width (currently at 600px).

 

 

0 Upvotes
4 Replies 4
BenSBM
Contributor | Elite Partner
Contributor | Elite Partner

Drag and Drop E-Mails: Change side padding and Width

Hi @fabianpimminger 

 

You can control the default email width and padding from your HubSpot settings:

 

https://app.hubspot.com/settings/[portal_id]/marketing/email/configuration

 

In here are various email default values, including "Email body width" and "Email body padding". Note that these would apply to all email templates on the account.

 

 

If you want to edit just one email template, you can edit the template head to add some CSS styles.

 

<style type="text/css" id="hs-inline-css">
/*<![CDATA[*/
  #templateTable,
  #contentTableInner {
      width: 600px;
  }
  
  #contentTableOuter {
      padding: 30px;
  }
/*]]>*/
</style>

<!--[if !mso]><!-- -->
<style type="text/css">
/*<![CDATA[*/
  @media screen and (max-width: 650px) {
      table#templateTable,
      table#contentTableInner {
          max-width:600px !important;
          width:100% !important;
      }
  }

  @media only screen and (max-width: 480px) {
      table#templateTable,
      table#contentTableInner {
          max-width:600px !important;
          width:100% !important;
      }
  }
/*]]>*/
</style>
<!--<![endif]-->

This code specifically is taken from a default HubSpot email drag-and-drop template, includign modile styles.

alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Drag and Drop E-Mails: Change side padding and Width

Hi @fabianpimminger ,

 

You can add the following to the head markup of the email (you can find this under the Head and body options in the right sidebar) to change the width and padding :

 

<style id="hs-inline-css">
  #templateTable,
  #contentTableInner {
    width: 800px !important;
  }
  table#contentTableOuter > tbody > tr > td {
    padding: 40px;
  }
</style>

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
sharonlicari
Community Manager
Community Manager

Drag and Drop E-Mails: Change side padding and Width

Hey @fabianpimminger 

 

Thanks for reaching out! I want to tag in some subject matter experts to get their insight on this situation.

 

@alyssamwilie @david_eic @krishangtechn do you have any suggestions for @fabianpimminger?

 

Thanks,

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
krishangtechn
Member

Drag and Drop E-Mails: Change side padding and Width

@sharonlicari  Thanks for sharing the issue of the customer.

@fabianpimminger  Normally 600pix width is maxed for email template and if it will increase after padding it will not work on different email so it won't be recommendation because we recently did a lot of hard work on research for the same with drag and drop an email and some section size is more then 600 so it's having an issue with couple of email.

 

So I would recommend using less size than 600px and then you can give padding. 

I hope it will help you @fabianpimminger.  

Thanks,

Ramesh Gosiya

Krishang Technolab