Support » Theme: JustBlog » Change site title font size

Viewing 10 replies - 1 through 10 (of 10 total)
  • Sorry, page is https;//staging1.baltimoreaaghs.org

    Theme Author bloggingthemes

    (@bloggingthemes)

    YIKES! Sorry, I didn’t realize my RSS feeds was hidden in my outlook and did not see your post….which was 3 days ago! I hate missing support questions, so my apologies.

    To change the font size for the title, add this to the Additional CSS tab in the customizer and then adjust the font size to your preference:

    #site-title {
    font-size: 3rem;
    }

    For the site description (tagline)

    #site-description {
    font-size: 1rem;
    }

    Not sure about your logo as I was unable to access your site.

    vmdials

    (@vmdials)

    Thank you. So you can check out the logo. The site is staging1.baltimoreaahgs.org

    Theme Author bloggingthemes

    (@bloggingthemes)

    Again, sorry for late reply. Thanks for the new link as well. I thought I would follow up with you on the logo before I head off to the land of sleep (it’s 3:30 am for me).

    Anyway, not sure if this is what you are looking for but this is going to require some custom CSS to be added to the customizer’s Additional CSS tab, so hopefully this will work for you:

    #site-branding .col-lg-8 {
        position: relative;
    }
    img.custom-logo {
        position: absolute;
        margin-right: 20px;
    }
    p#site-title {
        position: relative;
        margin-left: 160px;
        min-height: 145px;
    }

    Best Regards,
    Andre

    vmdials

    (@vmdials)

    Hi Andre,
    Thanks so much. It works great except on mobile, where I Would like image to display above site title.

    Theme Author bloggingthemes

    (@bloggingthemes)

    No longer have access to your site but the code above and for responsive mobile, my guess would be modified to be this:

    
    #site-branding {
        text-align: center;
    }
    #site-branding .col-lg-8 {
        position: relative;
    }
    img.custom-logo {
        position: relative;
        margin: auto;
    }
    p#site-title {
        position: relative;
        margin: auto;
        min-height: initial;
    }
    
    @media (min-width: 992px) {
    #site-branding {
        text-align: initial;
    }
     #site-branding .col-lg-8 {
        position: relative;
     }
     img.custom-logo {
        position: absolute;
        margin-right: 20px;
     }
     p#site-title {
        position: relative;
        margin-left: 160px;
        min-height: 145px;
     }
    }

    The first part is for small screens and then the second part that follows the @media line is for larger displays which uses the code I originally gave you. Try that and see if it works. Again, I did this without seeing your site, so hopefully it works.

    vmdials

    (@vmdials)

    Almost there. Looks good. One last tweak. How would you center the site-description under the logo and the site-title for all breakpoints?

    vmdials

    (@vmdials)

    Managed to get it done for notebook and mobile. For desktop view, site-description font is much smaller and not centered.

    vmdials

    (@vmdials)

    I think I found the last problem and fixed it. Thanks for all of your help.

    Theme Author bloggingthemes

    (@bloggingthemes)

    Good to hear 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.