Changing heading size and leading of blogs in Qua theme

  • Unknown's avatar
    superucomms · Member ·

    Hi
    I am using the Qua theme for my blog.

    I want to be able to condense the content of the blogs on the homepage so people don’t have to scroll so much to see the next blogs. I thought it would be good to make the heading of the blogs smaller when they feature on the home page and lesson the space between each line. Could you tell me how I can do this?

    This is my website: https://nzfamiliescommissioner.com/

    Thanks
    Amanda

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Amanda, to reduce the size of the post titles on the main page of your site, you can add the following CSS and then adjust the font size as desired. I’ve specifically targeted the home page by using the “home” CSS class set in the opening body HTML tag. 

    .home .entry-title {
    font-size: 2.8rem;
}

    If you wish to tighten up the spaces between the posts on the front page, add this and adjust the 4.0em bottom margin. 

    .home .hentry {
    margin-bottom: 4.0em;
}

    Let’s start with that, and then let me know if, and where you wish to reduce whitespace and I would be happy to help out with that.

  • Unknown's avatar
    superucomms · Member ·

    Thank you. That worked perfectly. Could you also tell me how I can make the image height of the blog posts shorter on the homepage too?

    Also, I would like to lessen the spacing around the top and bottom of the blog headings on the home page.

    Thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    Could you also tell me how I can make the image height of the blog posts shorter on the homepage too?

    We can do that, but the theme and WordPress software create the croppd images for the posts on the main page “on-the-fly” and crop at the size you see, and we can’t change that. We can make them smaller, but when we do that, the images are going to be narrower than the content below, which will look off. You can add the following to your CSS to see what I mean. 

    .home .attachment-qua-blog-size {
    max-width: 80%;
}

    To tighten up the spacing above and below the post titles on the home page, add the following. You can adjust the 0 values I have as you desire. 

    .home .attachment-qua-blog-size {
    margin-bottom: 0;
}
.home .entry-content-container {
    margin-top: 0;
}
  • Unknown's avatar
    superucomms · Member ·

    Hi
    Could you also tell me how I can make the blogs single spacing instead of double spacing?

    Thanks

  • Unknown's avatar
    thesacredpath · Member ·

    If you are talking about line spacing within paragraphs, add the following and adjust the 1.75 number. I would suggest 1.5 as it still gives enough whitespace between the line to allow for easy reading. 

    p {
    line-height: 1.2;
    margin-bottom: 1.75em;
}

    If I’ve misunderstood, please let me know.

  • The topic ‘Changing heading size and leading of blogs in Qua theme’ is closed to new replies.