COS-Blog

How can I change the size of the featured image in my HubSpot blog?

Last updated: August 4, 2017

Available For:

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

The size of your blog's featured images is set universally and cannot be changed by default. However, if you are comfortable working with CSS, you can set the size of your featured images within the stylesheet for your blog.

Please note: if you are not familiar with CSS, please work with a website designer to make this change. You can find design partners here

  • First, ensure that the featured image setting is enabled by following the instructions here.
  • In your HubSpot Marketing account, navigate to Content > Design Manager.
  • Locate and click on the name of the stylesheet used in your blog. You can see where stylesheets can be applied at the template and domain levels in this article. Blog-specific stylesheets may also be applied, as shown here
  • Add the following code to the stylesheet attached to your blog, replacing WIDTHPERCENTAGE with the desired width percentage. It's recommended, for organizational purposes, that you add this to the section of your stylesheet where other blog-specific styles appear. The image width is a percentage of the post's width and the height is set to be auto to the width.

.hs-featured-image {
width: WIDTHPERCENTAGE%;
}

  • If the above code does not have the desired result, please try replacing .hs-featured-image with .hs-featured-image-wrapper.

Was this article helpful?