Changing Size of Headings

• 

  williamgrovefanning · Member · Dec 1, 2013 at 11:34 pm

  • Copy link
  • Add topic to favorites

  To me the size of the headings (Heading 1, Heading 2, Heading 3, etc.) in the twenty-eleven theme are absurdly small. What is the css for changing the font size of these?

  I tried:

  h2 {
  font-size: 21px;
  }

  But it doesn’t appear to do anything.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  williamgrovefanning · Member · Dec 1, 2013 at 11:42 pm

  • Copy link

  I am getting somewhere with this.

  .entry-content h2 {
  font-size: 18px;
  }

  Just do this for each heading (h1, h2, h3, h4) or is there other css that I ought to use?

• 

  williamgrovefanning · Member · Dec 1, 2013 at 11:58 pm

  • Copy link

  My solution seems to work for the h1 and h2 headings, but not for the h3 heading. Thoughts?

• 

  justpi · Member · Dec 2, 2013 at 6:15 am

  • Copy link

  This type of selector should work for all the headings found in the content of posts and pages (and it does on my test blog). Could you link to a post or page where you see this problem?

• 

  williamgrovefanning · Member · Dec 2, 2013 at 9:30 pm

  • Copy link

  Sure. The headings in this post are h3 headings. They should be size 18 font but instead are around size 5.

  http://enviroethics.org/2012/09/08/fellowship-summer-research-animals-society-inst-wesleyan-university/

  I can tweak the font size of all of my other headings, but the h3 heading doesn’t seem to change sizes regardless of what value I put.

• 

  williamgrovefanning · Member · Dec 3, 2013 at 3:50 am

  • Copy link

  OK. I am learning a bit more about css, including how to find the css page for my theme. I can adjust my headings, including h3 using:

  .wf-active .entry-content h3 {
  font-size: 16px;
  }

  Cheers!

• 

  justpi · Member · Dec 3, 2013 at 10:37 am

  • Copy link

  Ah yes. My previous reply doesn’t apply in your case, because you’re using a Typekit font.

  Alternative solution:

  .entry-content h3 {
  font-size: 16px !important;
  }