Change size of site title and tagline.

• 

  visionsofwa · Member · Jun 14, 2016 at 5:07 am

  • Copy link
  • Add topic to favorites

  What is the best CSS for changing the size of the title and tagline? I’m very new to CSS.

  Also, is there a reference for color codes?

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

• 

  thesacredpath · Member · Jun 16, 2016 at 3:42 am

  • Copy link

  Hi there, for the site title, add the following and then edit the size as desired.

  body:not(.has-header-social-menu) .site-title {
      font-size: 2.875rem;
  }

  For the tagline, add this and adjust.

  .site-description {
      font-size: 3.5em;
  }

  For hex color values, you can do a search on the internet for “web smart hex color codes” (without quote marks) and you will find a good number of resources. They are laid out differently, so I’d suggest looking at some of them and find one that makes sense, and is easy for you to use. I’ve used this one at times: http://cloford.com/resources/colours/websmart1.htm .

• 

  visionsofwa · Member · Jun 16, 2016 at 5:02 am

  • Copy link

  This is very helpful! Thank you for the help. Is there a way to add multiple lines to this area?

  For example, our business name and tagline on the left, and then all of our clinic names on the right? Or would that be something we create a custom header image for?

• 

  thesacredpath · Member · Jun 16, 2016 at 9:01 am

  • Copy link

  Hi there, I see you have incorporated the phone data into your header image, but the problem is that the image is getting cut off on the left and right. We can fix that, but the problem is that the image will shrink with browser window/screen width, so on smaller screens it will be very tiny and unreadable.

  What I would suggest would be to include the location/phone information in the page content above the gallery and go back to the text-based title and tagline/description. It is going to the best solution for all screen sizes.