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

fabianpimminger
Member

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
sharonlicari
Community Manager

Hey @fabianpimminger 

 

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

 

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

 

Thanks,

Sharon


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

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


0 Upvotes
krishangtechn
Member

@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

amwilie
Key Advisor | Elite Partner

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>
border

Alyssa Wilie

Web Developer at LyntonWeb

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

BenSBM
Participant | Elite Partner

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.