Solved

Dawn Theme: Main Blog w 3 square grids

ACV
Shopify Partner
9 0 2

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

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 945

This is an accepted solution.

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

 

banned

View solution in original post

Replies 6 (6)

AvadaCommerce
Shopify Partner
3879 839 945

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.

banned
ACV
Shopify Partner
9 0 2

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. ☺️ 

AvadaCommerce
Shopify Partner
3879 839 945

This is an accepted solution.

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

 

banned
ACV
Shopify Partner
9 0 2

@AvadaCommerce  Thank you! ☺️ 

glopilot
Visitor
3 0 0

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

MadeSafely
Tourist
13 0 3

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!