[Paul T]

Is there a CSS code you can share to allow me to make the site tagline font larger? (I am hoping you can give me a code and I can change font size in code to experiment till I find the right size). Thanks!

[Paul T]

Sorry, I found it… did not look hard enough.. first answer I selected was wrong, but this works!
.site-description { font-size: 13px; }

Thanks!

[Mahesh]

@friarpaul: Glad to know you’ve resolved the issue by yourself. Have a nice day!

Regards,
Mahesh

[Paul T]

Actually, really could use help… is there a way to have the font sizes different on mobile device… I.e. set font size separately for each full display and mobile… according to my research there was, but I tried it and it did not work…I think it was catch box theme, not catch base theme…

[Paul T]

Or, in addition to above, it might work better for me if the site logo could be displayed for full screen, but not on mobile device… thanks

[Mahesh]

@friarpaul: Please post in your site url.

Regards,
Mahesh

[Paul T]

I am building my site at: test2.franciscandiscernment.org

In summary, I entered custom CSS to change font size of both site Title, and tagline. But when I do that, it seems the design is much less responsive, and my fonts are appearing too big in mobile site… so first I am wondering if there are ways to set fonts for each full screen and mobile devices.

second, it seems the font I chose for the site header on the large screen gets switched back to the default font on mobile device also. (Not too big of a deal, but I love the font I get on the larger device, would like to get it on the mobile also.)

Finally, the site Logo looks good to me on the large screen display, but again takes up too much room on mobile. So I was hoping I can have it display on the large screen, but then enter a CSS to have it NOT display on mobile devices.

Thanks.

[Mahesh]

@friarpaul: By site logo, do you mean the background image in the header? If so go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS and add the following CSS:

@media screen and (max-width: 990px) {
    .site-title {
    	font-size: 40px;
    }
}

@media screen and (max-width: 480px) {
    #masthead{
        background-image: none;
        background-color: #fff;	
    }
}

Hope this helps. Let me know if any problem.

Regards,
Mahesh

[Paul T]

Almost…
Sorry, I did not have the logo on my site when you looked at…
test2.franciscandiscernment.org (It is there now..)
The site is now the way I am hoping to have the site on large screen.
However, I want the mobile device to have:
1. Smaller Site-title Font on Mobile (30px)
2. Smaller Site-description on Mobile (20px)
3. I do NOT want the LOGO (the white square at left in header image) on mobile device

(I do still want the header image…. (but thanks to you I have a backup plan to remove it if need be!)

The other weird thing is the type of font on the mobile device for the site-title is different than the type of font on large screen. I am using Impact, Charcoal, sans-serif on the site, and the mobile device – i am guessing – is switching it back to default sans serif, arial?

[Mahesh]

@friarpaul: Seems you’ve managed to change the font-size to 30px in mobile devices. To remove the logo in mobile devices, add the following CSS in Custom CSS:

@media screen and (max-width: 480px) {
  #site-logo {
        display: none;
    }
}

Regards,
Mahesh

[Author]

Posts