Blog Images Reduce Sizing

Shopify Discussion

Topic summary

A user working with the Shopify Athens theme seeks to reduce blog post image sizes. Multiple developers offer CSS solutions targeting different files and classes.

Initial Solutions Proposed:

  • Adding CSS to theme.liquid, main.css, or section-blog-post.css
  • Targeting .article-template-image img with width adjustments (40-50%) and margin: auto for centering

Secondary Issue:
After implementing initial fixes, the user reports blog listing page images still aren’t resizing properly. A screenshot confirms the problem persists.

Latest Recommendations:

  • Add object-fit: scale-down or object-fit: contain to .card-article-image img or .card-media img
  • Target .template-blog .main-blog .card-article-image img specifically
  • Place code in base.css or at the bottom of main stylesheet

Current Status:
The discussion remains ongoing, with the user reporting that recent CSS suggestions haven’t resolved the blog listing page image sizing issue. Developers continue troubleshooting with increasingly specific CSS selectors and object-fit properties.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
21

try again and remove above css add this

.template-blog .main-blog .card-article-image img {

object-fit: scale-down;

}

1 Like