Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #92672
    Paul T
    Participant

    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!

    #92673
    Paul T
    Participant

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

    Thanks!

    #92679
    Mahesh
    Keymaster

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

    Regards,
    Mahesh

    #92682
    Paul T
    Participant

    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…

    #92683
    Paul T
    Participant

    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

    #92688
    Mahesh
    Keymaster

    @friarpaul: Please post in your site url.

    Regards,
    Mahesh

    #92696
    Paul T
    Participant

    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.

    #92779
    Mahesh
    Keymaster

    @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

    #92787
    Paul T
    Participant

    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?

    #92798
    Mahesh
    Keymaster

    @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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change Font Size for Site Tagline’ is closed to new replies.