Kadence theme CSS code

Bybasbuis CSS
The Kadence theme, both the free and the Pro version, is very flexible and offers many settings to customize everything to your liking. However, even with the Kadence theme, CSS code is required to adjust certain things. Because the Kadence theme and Kadence blocks (the builder) are two separate products, we have created separate pages with CSS code.

Kadence and CSS are a good team.

CSS is the ideal way to easily modify or remove elements of the Kadence theme. This allows you to customize the Kadence theme for your WordPress site. Because Kadence is fully optimized for the Gutenberg builder, CSS works as it should and the results are predictable.

Cache and changes to your site

Please note: almost every website uses caching. Caching means that most pages and scripts are ‘remembered’ to provide your visitors with a faster experience. If you make changes, such as CSS code, you do not want this. With these types of changes, it is advisable to turn off the site’s cache, or if you prefer not to do that, to clear the cache after modifying CSS.

Space above and below each Kadence heading with CSS

This CSS code controls the space above and below all h1, h2, h3, h4, h5, and h6 headings. Note: the first number is the space above the heading, the last number is the space below the heading. The margin in this code example is expressed in
em . You can change this to px, such as 15px. Note that decimals are marked with a . (dot) here and not with a comma.
/* CSS space above and under headings Kadence */
.single-content h1,.single-content h2,.single-content h3,.single-content h4,.single-content h5,.single-content h6 {
    margin: 0.4em 0 0.0em
			!important;
}

Space above and below each type of Kadence heading separately with CSS

The CSS code above gave all headings the same value for whitespace below and above. This is usually sufficient for many. However, you can also set it per heading type. You can, of course, adjust the values ​​(indicated here in em).
/* CSS space under and above, and above, of each Kadence heading separately */
.single-content h1 {
    margin: 0.5em 0 0.0em
			!important;
.single-content h2 {
    margin: 0.4em 0 0.0em
			!important;
.single-content h3 {
    margin: 0.4em 0 0.0em
			!important;
.single-content h4 {
    margin: 0.3em 0 0.0em
			!important;
.single-content h5 {
    margin: 0.3em 0 0.0em
			!important;
.single-content h6 {
    margin: 0.3em 0 0.0em
			!important;

}

Remove the shadow at the bottom of every Kadence page

Every Kadence theme page has a kind of shadow border at the bottom by default (between the last block and the footer). This CSS code removes the page shadow from the Kadence theme.
/* removes shadow under every Kadence page */
.site .entry {
    box-shadow: none;
}

Placement of CSS code

We assume that you already know how to place CSS. If you don’t know yet, check this out:

How to place CSS

Are you using a different theme?

The basis of the CSS code is then the same, only the targets (the classes that are affected by the CSS code) are typically different.

Then look up the correct classes via your theme’s helpdesk, Google, or by searching in the page code, and replace the classes in these CSS snippets with your .classes.

Similar Posts