Change Size of Form Field Help Text?

[lindsay_s_Chi]

Hi everyone! 

Same situation - Hubspot Design rookie here, not sure where I would fix this.

For this landing page:

https://www.paro.io/partner-vc?hs_preview=CArkrymk-5967192896

Trying to change the size/style of the Help Text underneath the "Which firm referred you to Paro?" field? Not sure where/how exactly to put in the new style *just* for the help text. Can anyone point me in the right direction where exactly I'd make this change, and perhaps provide some sample code? 

[Stephanie-OG]

Hi Lindsay, 

If you go to your Design Manager and search for the Act2.css file, then use Ctrl + F to search for "legend" within the file, you should see something like this (it may all be on one line as well): 

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

You can use font-size to set the font size, like this (I've used 12px as an example): 

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
    font-size: 12px;
}

Note that this will update the font-size for all "legend" items across your site. 

---

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

[lindsay_s_Chi]

Hey Stephanie!

Thanks for this!

Two follow up questions:

1) Since I don't necessarily want to update it for *everyone* (I'm a contractor and don't want to mess with their main mojo), is there a way to update it for just my form? (or copy that .css file to a new one, attach it to my template only?)

2) Will that change update all of the text in the form, or just the help text? I only want to update the help text, and I want to leave all other text as-is (the help text is what appears under the question)

Thank you!

Lindsay

[Stephanie-OG · Accepted solution]

Hi Lindsay, there are a few ways of doing it.

You could add in CSS that just applies to this page by going to Settings > Advanced Options > Head HTML and adding: 

<style>
  legend { font-size: 12px; } 
</style>

This will only apply to this page and only to legend elements (the "This will ensure you receive the appropriate partner discount." is the only legend element on this page). 

---

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

[lindsay_s_Chi]

That did the trick, thank you Stephanie!