Docs

[Stuart]

Hi, I’m trying to reduce the size of a feature image in only one of my blog posts.

I’ve followed some of the previous threads on this topic, and have taken the following steps:

1. Added a unique class to my post (.two-weeks)

2. Added the following CSS:

.two-weeks .entry-featured {
    width: 40%;
}

This has the desired effect, as the featured image is reduced to 40% for only the two-weeks post and none of the others.

However, it also has the undesired effect of reducing the thumbnail image size of all featured images on my News page.

I would be grateful for your urgent assistance to restore all thumbs on the News page to their previous size.

Thanks!

[Rahul]

Hey There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

.two-weeks .entry-featured {
      width:50%;
      margin:0 auto;
}

Change 50% to achieve your desired size.

Hope that helps.

[Stuart]

Hi, I am afraid you have not read my question properly. As described in my original post, I have already managed to resize the feature image on my blog post. But this code is also having the effect of reducing the size of all feature image thumbnails on my News page. Can you please provide me with code that will *only* resize the feature image on that one blog post linked above, and leaves the thumbnails on the News index page at their previous size.

Thanks again.

[Rad]

Hi there,

Please change it to this,

.single-post.two-weeks .entry-featured {
width: 40%;
}

Thanks!

[Stuart]

Great, thanks, that worked! Now, a further question, how do I reduce the size of that same image (and not the other images) on my News index page?

Thanks again!

[Rad]

Hi there,

Glad to hear that. What do you mean by the same image? Might be possible by post class by ID, but that means it will only work on those selected posts.

Thanks!

[Stuart]

So you’ve helped me reduce the size of the featured image for that specific post.

Now, I would like to reduce the size of that image on the News index page, because as you will see if you click the link, it is huge. I would like the other images on the News index page to stay their current size.

Hope that’s clear, and thanks again.

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

.blog .entry-thumb img {
    min-width: 0;
}

.blog .entry-featured {
    text-align:center;
}

.blog .entry-thumb {
        background-color: #fff;
}

Hope that helps

[Stuart]

Super, this works, thanks! Although it has now lost the red colour from the Renew theme when hovering over the image thumbnails.

I would be grateful if you could assist me to restore that hover colour.

Thanks again.

[Christopher]

Hi there,

Please remove this code :

.blog .entry-thumb {
        background-color: #fff;
}

Hope it helps.

[Stuart]

That restores the red hover colour, but it also adds a permanent red background to that thumbnail. Is there a way to have the ‘Two weeks to go’ news post thumbnail on the News page look the same as it does in the latest news section on the home page? That is, the image is zoomed and cropped to the thumbnail container.

Thanks again

[Christopher]

Hi there,

The image loads differently in recent posts element and archive page.
Recent posts element add image add background while in archive or blog page image loads within <img> tag, so they couldn’t be the exact same.

Please add this code :

.blog .entry-thumb img {
    width: 100%;
}

Hope it helps.

[Author]

Posts