CMS Development

gramirez
Contributor

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

I am very new at working with any part of the "email" section of HubSpot. I have recently been asked to create a new "unique" email template that has a 700px width. It should look like our current emails but with a 700px width (only assigned to the "new" unique template). Here is a link to on of our current emails. https://app.hubspot.com/email/3377481/details/42686225255/performance

Basically, what would be my best approach to accomplish this?
This is one of our recent emails.This is one of our recent emails.

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

Hey @gramirez , I can't view the link you provided as that link is only available to those with access to your portal. How you go about changing the width would depend on how the current templates are built; fully HTML coded, using drag and drop in the design manager, or DND? 

 

DND doesn't have an option to change the max width so not sure why SprocketTalk would recommend that. It's best practice to have the width of an email be 600px as it's a size that will fit within the preview panes of the majority of email clients. So I imagine that's why there's not an option in DND to change that.

 

If the email is fully HTML coded usually there would be set widths somewhere in the code, either in the tables themselves or in CSS. You could control+f (if on PC) to search "width" within the code and change the container tables' width to 700.

 

If the email is a drag and drop template in the design manager you can add some CSS to the Additional head markup to target the generated container tables.

Screen Shot 2021-03-09 at 4.38.41 PM.png

<style data-hse-inline-css="true">
  #templateTable,
  #contentTableInner {
    width: 700px !important;
  }
</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.

View solution in original post

7 Replies 7
dennisedson
HubSpot Product Team
HubSpot Product Team

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

Hey @gramirez 

How are you building the email?  Drag and drop or custom coded?

Hate to name drop @alyssamwilie twice within the last 10 minutes, but she is the go to source for things like this 😀

0 Upvotes
gramirez
Contributor

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

Hi @dennisedson I appreciate your reply, I'm not sure how to build it. I'm not an advanced developer, I'm more in beteween entry level and intermediate. I really hope @amwilie can help me out. I'm not sure how to go about this. It sounds so simple. All that they're asking me to do is Make a unique Email template (built exactly the same as our existing one) but just make it have a 700px width.

dennisedson
HubSpot Product Team
HubSpot Product Team

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

@gramirez quick lesson that will in no way help you here:

Nothing is simple when it comes to email 🙃

0 Upvotes
gramirez
Contributor

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

I just received this advice from someone on SprocketTalk:
You could rebuild that with the DND emails and set your max width manually for that email.
Can I just do this? @alyssamwilie🤔🤷🏻‍♂️

0 Upvotes
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

Hey @gramirez , I can't view the link you provided as that link is only available to those with access to your portal. How you go about changing the width would depend on how the current templates are built; fully HTML coded, using drag and drop in the design manager, or DND? 

 

DND doesn't have an option to change the max width so not sure why SprocketTalk would recommend that. It's best practice to have the width of an email be 600px as it's a size that will fit within the preview panes of the majority of email clients. So I imagine that's why there's not an option in DND to change that.

 

If the email is fully HTML coded usually there would be set widths somewhere in the code, either in the tables themselves or in CSS. You could control+f (if on PC) to search "width" within the code and change the container tables' width to 700.

 

If the email is a drag and drop template in the design manager you can add some CSS to the Additional head markup to target the generated container tables.

Screen Shot 2021-03-09 at 4.38.41 PM.png

<style data-hse-inline-css="true">
  #templateTable,
  #contentTableInner {
    width: 700px !important;
  }
</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.
ErinCorradi
Member

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

I'm having an issue with my email body being really wide on desktop. I looked through the source code and the width says it should be 600px. However, the email seems to be huge:

 

ErinCorradi_0-1654722504987.png

 

I attempted to apply the CSS you gave for  #templateTable and#contentTableInner but it doesn't seem to be limiting the width either.  Is there another element to target or line of code to double-check?

0 Upvotes
gramirez
Contributor

How can I make a unique email template that has 700px width, it has to be unique.

SOLVE

Haha, thanks for that! Perhaps it is good to know the pain-points in order to create better and more improved user experience.