Navigation
Archive / How to change h1, h2, h3, etc. font sizes
This is archived content. Visit our new forum.
  • Author
    Posts
  • December 22, 2014 at 1:53 pm #169124

    dereksilva
    Participant

    Hi there,

    I’m using the Integrity stack. I’m trying to change the sizes of h1, h2, h3, h4 and h5 to better suit my needs. What code do I need in order to do this?

    December 23, 2014 at 1:07 am #169568

    Christian
    Moderator

    Hey Derek,

    Please add the code below in the Appearance > Customize > Custom > CSS to CSS 

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

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

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

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

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

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

    For more CSS Properties, please see http://htmldog.com/reference/cssproperties/

    Thanks.

    December 30, 2014 at 3:06 pm #173699

    dereksilva
    Participant

    Thank you!

    December 30, 2014 at 9:53 pm #173883

    Christian
    Moderator

    You’re welcome Derek.

    April 4, 2015 at 7:33 am #242067

    iTurtle
    Participant

    hm. this doesn’t work on my site. has that changed lately?

    April 4, 2015 at 7:45 am #242073

    Thai
    Moderator

    Hi @iturtle,
    Would you mind providing me your website URL so I can take a closer look?
    Many thanks.

    April 4, 2015 at 9:27 am #242110

    iTurtle
    Participant

    hi @Staff, thanks for your quick reply! please have a look here: http://seminarhaus-ohlenbusch.de/wpx the custom css h1, h2, etc. seems to be inactive. on “normal” pages I used the h2 looks like 4 feature which is great! but on the start-page (blog) the headlines are elephant size 😉

    April 4, 2015 at 9:46 am #242117

    Thai
    Moderator

    Hi There,
    Please try to add !important; after the CSS, something like this:

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

    Hope it helps.

    April 5, 2015 at 2:15 am #242378

    iTurtle
    Participant

    hi @Staff,
    !important -> that sure helped!
    thanks so much!
    one happy x user 🙂 kai

    April 5, 2015 at 3:00 am #242396

    Christopher
    Moderator

    Glad we were able to help you 🙂

    August 27, 2015 at 4:49 pm #371619

    xxiiii
    Participant

    Hi there, I’m trying to figure out the same thing. Adding !important doesn’t seem to work. through the browser inspector i can see this code that’s taking precedence

    h1, h2, .h1, .h2 {
    font-size: 24px !important;
}

    Is there away to change this font size in Cornerstone or Customizer?

    thanks
    nico

    August 27, 2015 at 10:11 pm #371840

    Darshana
    Moderator

    @xxiiii

    To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    February 21, 2016 at 3:15 am #805172

    polycopy
    Participant

    This worked great for me:

    h1 {font-size: 24px !important;}

    Thanks all 🙂

    February 21, 2016 at 5:24 pm #805817

    Nico
    Moderator

    Happy to hear that.

    Feel free to ask us again.

    Have a great day! 🙂

  • Author
    Posts