Email

Does HubSpot have responsive email templates?

Last updated: October 30, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

Yes, all of HubSpot's drag-and-drop email templates are responsive by default. When you create a new email template, it is automatically responsive. A responsive email resizes based on screen size. Images and content modules will be resized and stacked to better fit the size of the screen the message is being viewed on. When a HubSpot template is made responsive, additional code (media queries) is added to the template which cause the email to appear differently on screens of different sizes.  Note that not all email clients support media queries, so the email may not appear responsive if it is being viewed in one of these clients.

You can convert HubSpot's responsive templates to basic fixed-width templates. A basic email does not resize based on screen size. Images will not stack or resize and all of the elements will remain static when you resize the browser window on the web page preview or view the email on a mobile phone or smaller screen.

To convert a responsive template to a basic fixed-width template:

  • Navigate to Content > Design Manager.
  • Locate and click the name of your template to edit.
  • Click Actions > Make basic.

To convert a basic fixed-width template back to a responsive template:

  • Navigate to Content > Design Manager.
  • Locate and click the name of your template to edit.
  • Click Actions > Make responsive.

Please note: the option to automatically make your template responsive is only available on drag-and-drop templates and will not appear if you are working with a custom HTML template. 

If your email is using a responsive HubSpot template, but you've noticed that elements of the email are not resizing or stacking as expected, there are a couple things you should check:  

  1. Are you viewing the email in a client that supports responsive email? Most desktop email clients do not support responsive emails; the responsiveness is mainly for mobile devices or the web page version of the email.
  2. Are there any fixed widths being applied to elements in the email? Fixed widths cause elements such as images or tables to render at the same size regardless of the viewer's screen size. To check this, access the source code of your email's content. Any fixed widths (e.g. width="600px") should be set to percentage widths (e.g. width="100%"). For example, in the screenshot below, the width of the table should be changed to width="100%" and the width of each of the two columns to width="50%"

Was this article helpful?