How to embed custom javascript in HubSpot CMS

[Janice_CC]

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.

[webdew]

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. 

[piersg]

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

<style>

/* styles here */

</style>

[Janice_CC]

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.

[piersg]

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.

<style>
@media (min-width: 768px) {
  .marketing-automation-row1 .span6 .widget-type-rich_text {
    position: relative;
    left: -14px;
    
  }
}
</stlye>