Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter vmdials

    (@vmdials)

    Sorry, page is https;//staging1.baltimoreaaghs.org

    Theme Author Blogging Theme Styles

    (@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.

    Thread Starter vmdials

    (@vmdials)

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

    Theme Author Blogging Theme Styles

    (@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

    Thread Starter 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 Blogging Theme Styles

    (@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.

    Thread Starter 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?

    Thread Starter vmdials

    (@vmdials)

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

    Thread Starter vmdials

    (@vmdials)

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

    Theme Author Blogging Theme Styles

    (@bloggingthemes)

    Good to hear 🙂

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

The topic ‘Change site title font size’ is closed to new replies.