Two reasons are generally the culprits for a broken theme: 1) a HubSpot bug causing stylesheets and JavaScript files not to be compiled correctly or stylesheets and 2) JavaScript files leftover from a previous build overwriting our theme code.
HubSpot Compilation Bug
When HubSpot renders a page, it compiles all of the 'includes' in a stylesheet or JavaScript file into one file and then minifies it. Sometimes during this process, the entire code is not compiled into the final file that renders on the page.
If you're using a free theme and still need to build many pages, you could try uninstalling and reinstalling the theme to fix the issue. To uninstall a theme, go to Settings > Marketplace Downloads, click the Actions button next to the theme, and select Uninstall from the dropdown.
Once the uninstall is complete, click Actions and Reinstall from the dropdown.
If you are using a purchased theme, simply do not want to uninstall, or uninstall and redownloading did not work, you will need to contact HubSpot support to have them fix this issue.
Old Files From Previous Builds
If our theme isn't your first time building your site on HubSpot, then global/page stylesheets or JavaScript files left over in your portal from a previous build could be overwriting styles and/or functionality in our theme. To ensure there aren't any errant files interacting with pages using our theme, you will want to do the following:
Go to Settings > Pages and check that there aren't any stylesheets, JavaScript files, or style blocks in the Site header HTML or the Site footer HTML. If there are, select and delete the text and click the orange Save button that appears.
Caution: Analytics and other external tools (Google Analytics, Hotjar, Wistia, etc.) often use embed codes with JavaScript. If you delete any JavaScript, ensure it's only old functionality that is no longer needed on the site.
If you have multiple domains, you will also want, on this same page, to click the Default settings for all domains dropdown at the top. Go through each domain using our theme to ensure they don't have any old files/code in their Site footer/header HTML.
If you have a specific page with styling/functionality issues, open the page editor for that page. You can do this by navigating to the live page while logged into HubSpot, clicking the Sprocket menu in the top right, and clicking Edit Page. Or you can go to Marketing > Website, locate your page in the listing, hover over it, and click Edit.
In the page editor, navigate to the Settings tab, scroll down, and click Advanced options. There are two places under advanced options you will need to check here.
The first is Additional code snippets. Delete any unnecessary stylesheets or JavaScript inside the Head HTML and Footer HTML boxes.
Then scroll down to Stylesheets and delete any listed stylesheets in both Domain stylesheets and Page stylesheets until you see the message "No stylesheets" listed in the box.
Publish the page by clicking the orange Publish button in the top right for the changes to take effect.