Blog Page – Featured Image resize

  • Unknown's avatar
    zyloc · Member ·

    I’ve almost got my blog setup, but one last thing bothers me and that is the size of the featured image on the blog post pages. What would be an efficient way to resize the image or reduce the size of the div tag it is contained within?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    We Volunteers do not request access to private sites. Staff can access them and they address all threads in this CSS customization forum. Please be patient while waiting.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @zyloc, this can be tricky. You can add this and then play with the height values and see how things go. The first controls the height on the first row and the second it controls the height on all subsequent rows. 

    .hentry-grid .hentry-col:first-child > .hentry, .hentry-grid .hentry-col:nth-child(2) > .hentry {
  height: 320px; /*was 400px*/
}
.hentry-grid .hentry-col .hentry {
  height: 250px; /*was 320px*/
}

    The images within are set to display at the center of the image, both horizontally and vertically, so you can keep that in mind when preparing your featured images.

  • Unknown's avatar
    zyloc · Member ·

    Thank you. That was quite helpful as I like the size of the gallery on the homepage with an adjusted smaller size. My question was specifically in regards to the Featured Image that displays on each blog page. It takes up nearly 80% of the screen when first reading a blog entry and I would like to reduce the size substantially if possible. Any tips?

  • kathrynwp · Staff ·

    zyloc – I don’t see a way to reduce the height on single posts, since there’s both a height and minimum height set dynamically, inline right on the element. That means it can’t be overriden with custom CSS, since CSS that’s closest to and element always “wins” when it comes to CSS specificity.

    timethief – it would be helpful if you could not add a reply to threads where you’re not directly assisting with CSS, since doing that takes threads out of our “unreplied CSS” queue, which we use to make sure all threads get a staff or CSS-volunteer reply. Feel free to just leave these unreplied, and staff or volunteer CSS helpers will get to them. Thanks for your understanding.

  • The topic ‘Blog Page – Featured Image resize’ is closed to new replies.