Store page: https://store.thepetshow.com/blogs/scrapbook
I’ve finally gotten the featured images down to size thanks to another post on this forum. But the containers have not adjusted along with the images. How do I fix this so the containers are comparable sizes to the images?
Also, when I click into a blog post, I need to scale down the featured images on those pages as well and have not been able to do so.
Can someone please assist?
Thanks!
You can actually fix this by editing the theme’s CSS (or Liquid if it’s hardcoded).
Make container match image size:
Add CSS so that the container scales with the image. Example:
.blog-card__image,
.article__featured-image {
max-width: 100%;
height: auto;
object-fit: cover; /* keeps aspect ratio clean */
}
.blog-card__media,
.article__media {
display: flex;
align-items: center;
justify-content: center;
}
That way the container shrinks with the image instead of staying oversized.
