Sense Theme: How to change blog card image height?

Store Design
, ,

Topic summary

A user working with Shopify’s Sense theme sought help with two blog display customizations:

Issue 1 - Blog Card Image Height (Resolved):

  • Blog post cards on the homepage were displaying images with a 3:2 aspect ratio
  • User wanted images to fill the full height of the card container
  • Solution provided: Add custom CSS code to the theme’s stylesheet (base.css/theme.css/style.css/main.css/custom.css) targeting .article-card .card__inner.ratio with a modified --ratio-percent value of 150.240964%
  • User confirmed this solution worked perfectly

Issue 2 - Blog Posts Per Row (Unresolved):

  • Blog page currently displays 2 posts per row
  • User wants to change layout to show 3 posts per row
  • No solution has been provided yet for this request

The discussion includes screenshots showing both the homepage blog section and the blog archive page to illustrate the issues.

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

Hello,

I have 2 questions with the blog using the Sense theme.

  1. On the home page I have a Blog Posts section and I want the images on the blog article card to be the full height, currently it uses a 3:2 aspect ratio. How can I change the container height? (first picture) link: right above footer https://tabletandquill.com/

  2. On the blog page, the Blog Posts section shows only 2 posts in one row. I would like for it to be 3 posts in one row. How can I do that? (second picture) link: https://tabletandquill.com/blogs/thequillcollective

1.PNG
1.PNG1138×706 191 KB

2.PNG
2.PNG1904×857 281 KB

On the actual blog,

2

HI @tabletandquill ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.article-card .card__inner.ratio {
    --ratio-percent: 150.240964% !important;
}
1 Like
3

This worked perfectly, thank you so much!