After adding a new blog article, I noticed that the image in the blog list appears excessively large, causing layout issues and a lack of responsiveness. I have also tested with previous templates, but the problem persists. It seems to be a problem with Shopify itself. I would appreciate a resolution for this issue.
Hi @nuditta
If your blog list images appear excessively large and disrupt the layout, follow these steps to resolve the issue:
1-Adjust Image Display Settings:
- Navigate to Online Store > Themes > Customize: https://prnt.sc/T875Qg2WWrdT
- Select Blogs > Default Blog.
- Within the blog settings, locate the Featured Image Height option.
- Ensure that the “Adapt to image” option is not selected.
Shopify Community
2-Modify Theme CSS:
-
Go to Online Store > Themes > Edit Code: https://prnt.sc/e2RRNKGplQEn
-
In the Assets folder, open your CSS file (commonly named base.css or theme.css).
-
Add the following code at the bottom of the file:
.article-card__image-wrapper .article-card__image {
padding-bottom: 100% !important;
}
@media (min-width: 1200px) {
.blog-articles {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.blog-articles > *:first-child,
.blog-articles > *:nth-child(4),
.blog-articles > *:last-child:nth-child(2),
.blog-articles > *:last-child:nth-child(5) {
grid-column: span 1;
}
} -
This code adjusts the image aspect ratio and sets a four-column grid layout for larger screens: Shopify Community
3-Ensure Consistent Image Dimensions:
- Before uploading, resize your images to maintain consistent dimensions across all blog posts.
- Shopify recommends a blog post image size of 720px by 1080px: Shopify Community
By implementing these steps, your blog list images should display correctly, enhancing both layout and responsiveness.
If you have other questions, feel free to ask, and I will answer them as well.
Best regards,
Daisy