Help with Blog Post Layout – Image Above Title & Excerpt Without Cropping

Shopify Discussion

Topic summary

A Shopify store owner is struggling to properly display blog post featured images on their homepage. The images are being cropped into a square format instead of showing their original dimensions (2500x1200px).

Current Issue:

  • Featured images appear behind the title and excerpt by default
  • After CSS modifications, images display above the title but get cropped to square dimensions
  • The original aspect ratio is not preserved

Desired Outcome:

  • Featured image positioned above blog title and excerpt
  • Full image visible without cropping
  • Properly centered and responsive across screen sizes

Progress:
One commenter provided a CSS solution that improved centering, but the fundamental cropping issue persists. The problem appears to stem from Shopify’s fixed width/height constraints for blog images. The user has identified relevant CSS code but is unsure how to modify it for responsive, full-size image display without cropping.

The discussion remains open with no complete solution yet found.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m trying to adjust the blog post section on my Shopify homepage. By default, the featured image is hidden behind the blog post title and excerpt, so I added some CSS to move the image above the title. However, the images are still getting cropped, and the layout doesn’t look good.

I’d like to:

  1. Display the featured image above the blog title and excerpt.
  2. Ensure the image is fully visible (not cropped).
  3. Center the image properly so it looks balanced.

Has anyone successfully implemented this? Any CSS or Liquid adjustments that might help?

chrome_mobVveyck2.png
chrome_mobVveyck2.png805×776 120 KB

Website URL: highfallscannany.com

Thanks in advance for your help!

2

Is this ok?

Shadab_dev_0-1737356894058.png
Shadab_dev_0-1737356894058.png952×509 181 KB

I believe you pretty much did it, but this makes the image more standout and more centered.

3

For some reason it is resizing the featured image to a square layout, the original blog post image is the following:

prerollpic
prerollpic2500×1200 247 KB

For some reason the image resolution is set to a fixed width and height it seems like, I am trying to find a way to have the blog post layout on the home page have the original, full size featured image of the blog post above the title and description.

There is this section of CSS that seems to determine how the layout looks, but I am not sure how to fully modify the code for the entire page so it is responsive on different screen sizes and does not crop the images..

4

Well yeah, this is something that’s there for all platforms, that It sets a particular width and height. For some you are allowed to set a width and height but Shopify does not have that.