How to change header sizes in Wordpress X-Theme, Integrity

Support
#1

Hi there,

I have a few questions:

  1. I’m trying to change the font size of H1, H2, H3, H4, H5 and H6 on my wordpress page.

Untill now I have tried these CSS codes inside customizer–>Custom–>global CSS:

h1, .h1 {
font-size: 6em !important;
}

h2, .h2 {
font-size: 5em !important;
}

h3, .h3 {
font-size: 4em;
}

h4, .h4 {
font-size: 3em;
}

h5, .h5 {
font-size: 2em;
}

h6, .h6 {
font-size: 1em;
}

But sadly it doesn’t work in my configuration somehow.

  1. I also want to change the size of the title page, if this can be changed seperately.

I tried this code, which didn’t work as well for me:

.entry-title a {
font-size: 7em;
}

  1. Also I would like to change the (white) spacing between: different alineas, header and text (below) and between page title and text

Any help will be much appreciated. Thank you.

#2

Hi there,

The codes that you have included should work correctly for what you are aiming to do. They must not be taking effect because there is a CSS error in the codes that is in the custom CSS panel.

Please copy all the codes here to check for CSS errors.

Kindly also provide URL so that we could provide suggestions for your third question.

Thank you.

1 Like
#3

Hi Jade,

You were right. Thanks for the link to check my CSS for errors. It was a rookie mistake, missing a curling bracket in the code above it, which made the other code not working either.

I do have another noob question related to CSS though. I found there are many places to put custom CSS:

  1. cornerstone editor: CSS
  2. customizer:custom:global CSS
  3. customizer:extra CSS
  4. style.css in parent and child theme file(s)
    –5) CSS code inside a page itself (I know this is useful for individual pages and elements, where the CSS code is different from the default theme CSS)–

How can someone know where to put which CSS code? or doesn’t it matter? Is there a priority ranking system maybe with these different locations?

Hope you can make this a bit more clear for me.

I found one solution for the white spacing between lines. I added this inside the page:

p{ line-height:20px }

Thanks for your help so far!

#4

Hi there,

It depends on the amount of the customization you want to do.

If you want to have a good amount of customization the best way is to have the Child Theme and usage of the style.css

On the next level you’d better use the new versions X > Launch > Options > CSS option. Try to avoid usage of the Customizer in the new versions of the theme as that will be deprecated in upcoming releases.

For individual pages use the Page Builder CSS functionality inside the page.

Hope it helps.