# How to embed custom javascript in HubSpot CMS

**URL:** <https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605>\
**Category:** CMS Development\
**Created:** [January 31, 2022, 10:22am UTC](https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605 "2022-01-31T10:22:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Janice\_CC](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@Janice\_CC](https://community.hubspot.com/u/Janice_CC)\
**Post date:** [January 31, 2022, 10:22am UTC](https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605/1 "2022-01-31T10:22:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [January 31, 2022, 12:21pm UTC](https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605/2 "2022-01-31T12:21:05Z")

</div>

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

```lia-code-sample
<style>

/* styles here */

</style>

```

---

<div class="post-metadata">

**Author:** ![Janice\_CC](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@Janice\_CC](https://community.hubspot.com/u/Janice_CC)\
**Post date:** [February 1, 2022, 9:21am UTC](https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605/3 "2022-02-01T09:21:43Z")

</div>

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: [CRM and Marketing Automation | Carter Consulting](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).

 ![06914_0-1643707220126.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/b/b23fe8b93d68c6b27f8acfaa57f36d887bd5cf35.jpeg)

 ![06914_1-1643707257329.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/f/cf6ba7a94287aa802ccf280040ff0c4b10fefd7a.jpeg)

Thank you.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 1, 2022, 10:45am UTC](https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605/4 "2022-02-01T10:45:58Z")

</div>

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.

```lia-code-sample
<style>
@media (min-width: 768px) {
 .marketing-automation-row1 .span6 .widget-type-rich_text {
 position: relative;
 left: -14px;

 }
}
</stlye>

```

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [February 1, 2022, 8:35am UTC](https://community.hubspot.com/t/how-to-embed-custom-javascript-in-hubspot-cms/50605/5 "2022-02-01T08:35:35Z")

</div>

Hi [@Janice\_CC](https://community.hubspot.com/t5/user/viewprofilepage/user-id/309398) ,

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.