• Resolved mrblues

    (@mrblues-1)


    Hello all!

    I´m rather new with WordPress and CSS code editing, how can I change page title & tagline font sizes / colors by using CSS tool (Jetpack)?

    Thanks!

    mrblues

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hey there mrblues, hope you’re well today!

    This is definitely possible with some custom CSS. Please try adding the following code using JatPack custom CSS tab:

    @media screen and (min-width: 783px) {
    .site-header .site-title {
      font-size: 1.625rem;
    }
    .site-header .site-description {
      font-size: 0.8125rem;
    }
    }
    
    .site-header .site-title, .site-header .site-description {
      color: #757575;
    }

    Increase/decrease the numeric values for site title and description to what ever suits you the most. As for the color for both you can replace the color hax value to the one that you want. You can use sites similar to this one to get hex value for the color of your choice:

    http://www.color-hex.com/

    If the code doesn’t work can you please keep it added and post link to your site so I can take a look?

    Hope this helps 🙂

    Best regards,
    Bojan

    Thread Starter mrblues

    (@mrblues-1)

    Hello Bojan!

    thank you for your reply, I´m afraid so far there is no change on font sizes, my CSS code is as follows, you think there might be something wrong with it after I added your code?

    a,
    a:link {
    	outline: none;
    	color: #0066cc;
    }
    
    a:visited {
    	color: #0066cc;
    }
    
    a:hover,
    a:active {
    	color: #FC9F00;
    }
    
    @media screen and (min-width: 783px) {
    .site-header .site-title {
      font-size: 1.625rem;
    }
    .site-header .site-description {
      font-size: 0.8125rem;
    }
    }
    
    .site-header .site-title, .site-header .site-description {
      color: #757575;
    }
    Thread Starter mrblues

    (@mrblues-1)

    now it works, thank you!

    I changed the order and I put your code first, after that my code about link colors.

    @media screen and (min-width: 783px) {
    .site-header .site-title {
      font-size: 1.625rem;
    }
    .site-header .site-description {
      font-size: 1.225rem;
    }
    }
    
    .site-header .site-title, .site-header .site-description {
      color: #000000;
    }
    
    a,
    a:link {
    	outline: none;
    	color: #0066cc;
    }
    
    a:visited {
    	color: #0066cc;
    }
    
    a:hover,
    a:active {
    	color: #FC9F00;
    }

    Hey again mrblues,

    That’s odd, changing positions to those two shouldn’t make any difference so I’m just assuming it was most likely just a caching issue so you didn’t see the changes made when added the code first time.

    Either way I’m glad to hear you managed to figure that out and make this to work 🙂

    Have a great day!

    Cheers,
    Bojan

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Tiny Framework Title & Tagline Font Size’ is closed to new replies.