CMS Development

Janice_CC
Participant

How to embed custom javascript in HubSpot CMS

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.

0 Upvotes
4 Replies 4
webdew
Guide | Diamond Partner
Guide | Diamond Partner

How to embed custom javascript in HubSpot CMS

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. 

0 Upvotes
piersg
Key Advisor

How to embed custom javascript in HubSpot CMS

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>

 

0 Upvotes
Janice_CC
Participant

How to embed custom javascript in HubSpot CMS

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).

06914_0-1643707220126.png

06914_1-1643707257329.png

Thank you.

0 Upvotes
piersg
Key Advisor

How to embed custom javascript in HubSpot CMS

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>

 

0 Upvotes