Image size issue on blog collection page

Store Design
, ,
1

Is there any requirement for the image size? How can I make the image display completely

2 Likes
2

In Horizon, the blog image height varies depending on screen width, so it will change when you shrink/expand the window. If you want a full image no matter what, you can click on the

.blog-post-card__image-container img {
  height: 100% !important;
}

Screenshot 2026-02-25 022354
Screenshot 2026-02-25 022354270×557 7.62 KB

1 Like
3

Hi @youwei

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > style.css and paste this at the bottow of the file:

.blog-post-card__image-container{
  aspect-ratio: 3 / 2;
}

.blog-post-card__image{
  width:100%;
  height:100%;
  object-fit:cover;
}

image
image1364×566 139 KB

4

hey @youwei try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tagif this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
img.border-style.blog-post-card__image.blog-post-card__image--large {
    object-fit: cover !important;
    height: 100% !important;
}
}
</style>

image
image1909×921 200 KB

1 Like
5

Hi @youwei

Thank you for getting back to me. I’m happy to hear that it worked for you. Should you need any further help, please don’t hesitate to reach out. If you found the post helpful, kindly consider giving it a like.