Why custom CSS Works in the Dashboard Preview But not on the Live Site

With a paid subscription on the Personal and Pro plans, custom code is included as an option for loading scripts and applying custom CSS styles to your site. If your custom code is not applying to your live site, first please check that your site subscription is up to date and active on your site. You can check this from the Account tab and the Site overview page of the dashboard.

The sequence of when styles are applied to your site

Site styling customizations are applied in the following sequence, with later ones having the potential to override a corresponding style applied earlier in the sequence.

1. Default Super styling 2. Super Theme Designer (from the Design menu) 3. Externally loaded template stylesheet 4. Global CSS 5. Page level CSS

Make sure to use the `!important` rule

For your custom CSS to override a similar style, the !important rule needs to be added to your CSS. Eg display: none !important; Without this rule, your custom code may not have the priority to override the preceding CSS code.

More specific targeting wins

If you target CSS generically, and a more specific targeting rule exists already, then the more specific targeting will override your code. Here is a good article explaining more about CSS selectors.

General selection: p { color: red !important; }
More specific selection:article > .notion-column-list > .notion-column:first-of-type { color: red !important; }

Conflict between global and page-level code

Sometimes CSS works in preview but not on the public site because there is a CSS conflict that occurs between global CSS and page CSS. The way the dashboard previews the page loads the page-level CSS to render the page, and this can override a conflict that might be present in the global code. Please make sure that your CSS in the global section and page section are not in conflict.

CSS errors