The blog list images are not adapting correctly.

[nuditta]

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.

[DaisyVo]

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