Changing font size while keeping words on seperate lines

• 

  emilysm06 · Member · Aug 29, 2014 at 12:26 am

  • Copy link
  • Add topic to favorites

  How do I make my header font smaller whilst still keeping each word on a separate paragraph? The header is my name but I would like each word of my name on a new line. My website is emilystreatfeildmoore.com.

  Thanks!

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

• 

  senff · Staff · Aug 29, 2014 at 12:36 am

  • Copy link

  First, make the font size smaller. It’s currently at 70px, so try setting it at 60px for example.

  You’ll see that it will then be 2 lines (instead of 3), but you can fix that by setting the width of #masthead hgroup a little smaller. This is currently set at 50%, but if you would set it to 40%, it should go back to 3 lines again. So in that case, add this to your custom CSS:

  #masthead hgroup {
      width: 40%;
      }

  It will take a little bit of tweaking back and forth, but the idea is that you make the font smaller first, and then adjust the width of the hgroup.

• 

  emilysm06 · Member · Aug 30, 2014 at 11:29 am

  • Copy link

  Amazing, thank you so much!

• 

  emilysm06 · Member · Aug 30, 2014 at 12:02 pm

  • Copy link

  Hi,

  I have just done what you said and my whole website has now gone really weird! The whole format has changed around and I have tried deleting the CSS code but it still hasn’t changed back! My header is now underlined and my menu has now aligned to the left! HELP!

  Thanks!

• 

  emilysm06 · Member · Aug 30, 2014 at 12:30 pm

  • Copy link

  I’ve found the CSS revision section and managed to change it all back to the way it was!

  Thanks!