topic How to embed custom javascript in HubSpot CMS in CMS Development

How to embed custom javascript in HubSpot CMS

Janice_CC — Mon, 31 Jan 2022 10:22:00 GMT

I''ve created a new page using HubSpot CMS but the spacing looks different depending on desktop sizes.

I contacted HubSpot Support Team and the agent told me that I'll need to work with a developer to embed custom Javascript to address this spacing issue.

Would anyone know how to do this?

Thank you.

Re: How to embed custom javascript in HubSpot CMS

piersg — Mon, 31 Jan 2022 12:21:05 GMT

Spacing is a CSS issue, not a JS issue.

There are a few ways to add CSS. If you want the styles applied across your whole site, you should write your styles in a stylesheet (file ending .css) and add it to your page template(s) or in your settings (Settings > Website > Pages > CSS & Stylesheets).

If you want your styles applied to one page only and you have a css file, you can add it to a page in the settings or, if you don't have a stylesheet, you can write the css in the advanced settings of a page in header or footer HTML like

Re: How to embed custom javascript in HubSpot CMS

webdew — Tue, 01 Feb 2022 08:35:35 GMT

Hi @Janice_CC ,

You can add javascript inside the module.js or add css inside module.css. Please share the link of the page where you are getting issues.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Re: How to embed custom javascript in HubSpot CMS

Janice_CC — Tue, 01 Feb 2022 09:21:43 GMT

Hi @piersg

Thank you for your response.

How do I write the styles that only applies to a section on the page?

Here's the link to page: https://www.carterconsulting.co.uk/hubspot-implementation-partner?hsLang=en

The spacing issue occurs in HubSpot services section depending on desktop sizes (please see screenshots from two different desktops).

Thank you.

Re: How to embed custom javascript in HubSpot CMS

piersg — Tue, 01 Feb 2022 10:45:58 GMT

I assume you want that copy left-aligned so it's inline with the heading? Whoever wrote the styling for this has written the left padding with "!important" on the id, which is difficult to override with one CSS rule, the easiest method is probably doing it with left positioning. Copy paste this into the header HTML section in the advanced settings of the page.