Featured Image and Post Image

[rlattajr]

Hello.
My featured image has its head cut off at the top. However when I go to the post page it shows up properly. I have changed the pixels but to no avail. The front page featured image is still cropped at the head. The post page image displays properly.

[friech]

Hi Robert,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here. You can add this to Theme Options > CSS

.blog .entry-featured a {
	background-size: contain;
}

If you’re wondering how I find the .blog .entry-featured a selector. You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[kafechew]

Hi Friech,

I have a similar issue, for the new Crafty theme.

It was caused by the default entry-thumb class.

I’m not sure how to remove the cropped version and use the full image.

Please advice.

[ruenel]

Hello Kai Feng,

Thanks for updating this thread. I have checked your site and I found out that you have uploaded 2976x1600 pixel image. Please resize it to at least 750x750 dimension so that the featured image will not be cropped. Upload a featured image just less than your maximum content width you have set up in X > Theme Options > Layout and Design > Site Max Width will prevent the featured image from getting cropped and display the full original image instead.

Best Regards.

[kafechew]

Hi Ruenel,

Thanks for your response.

But your solution was not working.

No matter how small I resize… even to 500x269, it was still cropped.

I will have to leave it for now.

[ruenel]

Hello Kai Feng,

You are having issue with your featured images because you have added this custom CSS:

.single-post .entry-featured {
    position: relative;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.single-post .entry-featured img {
    height: 400px;
    object-fit: cover;
}

Kindly removed these CSS blocks and also update this CSS block:

.single-post .entry-wrap {
    padding: 0;
}

By using this code instead:

.single-post .entry-wrap {
    padding-left: 0;
    padding-right: 0;
}

And you will have this layout:

We would love to know if this has worked for you. Thank you.