Site Title

• 

  gigi32016 · Member · May 27, 2016 at 5:32 pm

  • Copy link
  • Add topic to favorites

  I changed the font size and color for the site title. Now it does not scale down to be viewed on a phone. What do I need to add? Also, the title does not change color when hovering over it in Chrome. What do I need to add?

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

• 

  michaelvandenberg · Member · May 28, 2016 at 7:40 am

  • Copy link

  Hi there,

  You could try something like this:

  @media (max-width: 880px) {
  	h1.site-title {
  		font-size: 6rem;
  	}
  	h2.site-description {
  		font-size: 3rem;
  	}
  }
  
  @media (max-width: 790px) {
  	h1.site-title {
  		font-size: 5rem;
  	}
  }
  
  @media (max-width: 680px) {
  	h1.site-title {
  		font-size: 4rem;
  	}
  	h2.site-description {
  		font-size: 2rem;
  	}
  }

  By default the font-size of the site-title is 8rem. With this the font-size will be reduced to 6rem if the screen width is smaller than 880px. If the screen width is smaller than 790px the font-size will be reduced even further. Etc. :)

  I hope this helps!

  Best regards,

  Michael

• 

  gigi32016 · Member · May 29, 2016 at 4:12 am

  • Copy link

  Thank you Michael. I like it!