Reduce H1 size in TwentyTwenty ?

  • Resolved steve02476

    (@steve02476)


    4 years, 10 months ago

    I’m a completely new person to WP. I have an installed WP5.3 site and I basically picked the TwentyTwenty theme at random, seeing that it’s clearly current and I like the basic default looks.

    But the main header on each page (I guess H1?) is way too big and bold for my site. I can see where it would look perfect for some sites but mine is intended to be sort of relaxed (it’s for a book club haha).

    I don’t have the expertise or the interest to completely modify CSS files, etc. What is the simple way for me to keep this theme pretty much as-is but tweak a few things like the size of the main header (I think H1)? Or if I’m looking for something non-complex would it be better for me to just switch to another theme?

    I was having some problems with BBPress formatting and was pointed to a style-editor plugin (bbp style pack) that seems to work pretty well, is there something like that that would be recommended for the TwentyTwenty theme?

    Thanks in advance for your help!

    • This topic was modified 4 years, 10 months ago by steve02476.
Viewing 2 replies - 1 through 2 (of 2 total)

  • What you asked for is already built-in. It’s under Appearance > Customize > Additional CSS

    Use this code in it.

    
h1, .heading-size-1 { font-size: 2.4rem; opacity:0.8; font-weight: normal; }

@media (min-width: 700px) {
	h1, .heading-size-1 { font-size: 3.6rem; }
}

    Change rem value to your liking. First line is for small screen (under 700px wide), the one within @media is for screen bigger than 700px. This part opacity:0.8; font-weight: normal; is optional.

    Thread Starter steve02476

    (@steve02476)

    thanks, that did it!

    And I’m proud of myself, I then noticed that the footer heading was also weirdly large, so I added this section to make it smaller:

    h2, .heading-size-3 { font-size: 2.2rem; opacity:0.8; font-weight: normal; }

@media (min-width: 700px) {
        h2, .heading-size-3 { font-size: 3.2rem; }
}

    Not sure that’s the best possible sizes or anything, but it changed it from huge to reasonable (in the context of my site anyway).

    Thanks for your help, @paulwp !

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Reduce H1 size in TwentyTwenty ?’ is closed to new replies.