How can I change blog images to square and arrange in a grid on Dawn theme?

Store Design
1

Hello-

Any tips on making the main blog page images square instead of 2:3

Also id like to have them all be on a grid

3 blog posts across - all square images

Thanks!

Site- https://acuratedvibe.com/blogs/journal

2

Hi @ACV ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-main-blog.css->paste below 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;
    }
    .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;
    }
    
}

I hope it would help you.

1 Like
3

Hi @AvadaCommerce

Thank you for your help. This worked for the grid aspect, but curious how can I make each blog post a 1:1 image instead of 2:3 image as well. :smiling_face:

4

Hi @ACV

You try paste below code at the bottom of the file base.css:

.article-card__image-wrapper .article-card__image {
    padding-bottom: 100% !important;
}

AvadaCommerce_0-1642236434058.png
AvadaCommerce_0-1642236434058.png1304×538 389 KB

5

@AvadaCommerce Thank you! :smiling_face:

1 Like
6

Hi there, I used this code you recommended and it worked great on my main blog page to do 4 posts across (see example page here: https://madesafetest.myshopify.com/blogs/news) The problem is that now the featured images are not showing up on mobile or tablet. They show up fine on laptop. Can you please advise how to modify this code so that the featured blog images still show up on mobile and tablets? Thank you in advance for your help!

7

I used this, and it did make the images square, however it now covers the blog title and excerpt. Can you advise?