Resizing entry-thumb image on secondary post

[techspecx]

Hello Team,

I have been traversing the forum looking for code that will resize the blog images to make them all the same size and contained within the elements content box. I found code that helps with the front page image:

.blog.entry-thumb img {
display: block;
overflow: hidden;
width: 400px;
height: 400px;
-o-object-fit: cover;
object-fit: contain;
}

But at times some images expand beyond their boundary.

My question is that once you click on the front page blog to get to read the article the div.entry-featured or the div.entry-thumb image is expanded beyond it’s boundaries. And I am trying to utilize the code I found here in the forum but it seems I need some help with this.

Here is a link to see what I am talking about with the :

Acer Aspire XC Desktop, Intel Celeron J4125 Processor, 8GB RAM, 256GB PCIe...

And the code that I tried using is below:

/* Change header image for blog post */

div.entry-thumb img {
display: block;
overflow: hidden;
width: 400px;
height: 400px;
-o-object-fit: cover;
object-fit: cover;
}

I have tried both div.entry-featured or the div.entry-thumb and the image still does not resize to fit in the element’s content box.

Could you help and let me know the correct code on both the front page blog and the secondary blog images?

Thank you.

Regards,
Robert

[tristup]

Hi Robert,

Thanks for reaching out.
Although the custom CSS code is beyond the scope of Theme Support, still I have checked and it seems your custom CSS code does not have any problem. It might be due to the priority, and you need to use the !important with attributes of the CSS.
Your code will look like the following.

div.entry-thumb img 
{
    display: block !important;
    overflow: hidden !important;
    width: 400px !important;
    height: 400px !important;
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[techspecx]

Hello tristup,

Thank you for your time and reply but that did not work. And I don’t think this is a custom coding request. This is your theme that is making that image look that way and I am asking for help.

I also noticed plenty of blog posts where people have helped others without mentioning custom code support.

I have tried other themes and the image appear fine but with your theme the image is outside the container box.
Surely there has to be someone that can help. If you look at the image below the title that is exactly what the image is suppose to look like.

Regards,
Robert

[ruenel]

Hello Robert,

Please understand that any modification that needs custom CSS is already considered custom development. By the way, your image was stretched because it has a dimension of 151x433 pixels. In our theme styles, the min-width of the image is 100% so that it occupies the whole area above your post title. Do you want to display it like this instead?

If that is the case, you will be needing this override CSS code:

.single .entry-thumb img {
    display: block;
    min-width: 0;
    width: auto;
    margin: 0 auto;
}

The code above serves as an example code. Feel free to modify it when needed. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[techspecx]

Hello @ ruenel,

I thank you for your reply. This is the code I initially used before I came to the forum for help. But the black borders I could not get rid of.

I tried various modifications but thought that maybe you intelligent people could enlighten me a little. You have helped and I appreciate the feedback on how to code this.

But how to get rid of the black borders and would this code affect all images in that position on the website.

Regards,
Robert

[prakash_s]

Hello Robert,

In order to remove the border which comes under the featured image I would suggest you add this custom CSS code.

.single .has-post-thumbnail .entry-featured {
border-bottom: none;
}

Add this custom CSS code to remove the border and box-shadow.

.single .has-post-thumbnail .entry-featured {
border-bottom: none;
box-shadow: none;
}

Add this custom CSS code to remove the background of the post-featured image

.single .has-post-thumbnail .entry-thumb {
background-color: transparent;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[techspecx]

Hello gentlemen,

This is what worked from the code that you offered me:

/* Code to resize image on secondary page and remove black background */

.single .has-post-thumbnail .entry-featured img {
display: block;
overflow: hidden;
width: 400px;
height: 400px;
-o-object-fit: cover;
object-fit: contain;
}

.single .has-post-thumbnail .entry-thumb {
background-color: transparent;
}

Thank you both for your time and replies. I wish you a beautiful life.

Regards,
Robert

This ticket can be closed.

[ruenel]

No problem, Robert.
We’re here for you whenever you need us.