Featured Image in Single Post Layout is Cropping — How to Display Full Image Without Cutting It Off?

Hi team,

I’m using Cornerstone with Pro Theme and displaying the featured image at the top of single blog posts . The issue I’m running into is:

The featured image is being cropped (top/bottom cut off) instead of showing in full height. I want it to display the full image responsively across all screen sizes without distortion or cropping.

So far I’ve tried:

  • Adjusting CSS via .entry-featured img { object-fit: contain; height: auto; }
  • Checking my Theme Options and Layout settings
  • Clearing cache and testing across screen sizes

I’m not using a Theme Builder “Single Post Layout” currently — just the default post view. But open to switching if that’s the better solution.

Goals:

  • Display the entire featured image at the top of each post
  • Maintain responsive scaling (mobile/tablet/desktop)
  • Avoid excessive whitespace if image is tall

Can you let me know:

  1. What’s the best method to make this work cleanly?
  2. Should I be using a specific Cornerstone element or layout instead?
  3. Is this easier to control if I build a custom “Single Post” template in the Theme Builder?

Thanks so much for your help — I’d love to create a clean, repeatable setup for future blog posts.

Hello Michael,

Thanks for writing in! Based on what I am seeing on the screenshot, I could tell that this is one of the single layout templates. You may need to edit it and set the maximum height of the featured image Cell element to none so that the full image will display.

We would be happy to double check your site if we can log in and give you steps in modifying the said template layout. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

Thanks for the reply. I made these changes in the single template and no luck. IDK.

on a different but related note, I’ve tried a bunch of things in the forums to try and remove the dates from the Blog page. is there something I’m missing? Theme Options > Post Meta is off and I’ve added a bunch of different CSS trying to remove it.

/* Blog archive cards */
.entry-date,
.post-date,
.eg-post-date,
.date-tag,
span.date,
.time,
.blog .entry-header .meta,
.single-post .entry-meta {
display: none !important;
}

/* Remove date under blog post title (single) */
.single-post time,
.single-post .x-entry-date,
.single-post .entry-meta time,
.single-post .entry-meta span,
.single-post .entry-meta {
display: none !important;
}

/* Remove date from blog posts */
.single-download p.p-meta {
display: none;
}

.blog .featured-meta {
display:none;
}

.p-meta {
display: none !important;
}

Hey Michael,

You will have to edit your The Naturalist Guides of Parador single and click the featured image as indicated in the screenshot below. The Maximum height should be set to “NONE”.

And to remove the date in the blog layout, edit the BLOG archive layout and remove the DATE element as shown in the screenshot below:

See the links in the secure note below.

Best Regards.