Avenue Theme - Looking to change blog post landing page layout

Store Design
1

I’m using the Avenue theme.

Currently my blogs populate in a column format; each entry stacked on the previous one (first screenshot).

I am hoping to find a simple solution (CSS, liquid code change is fine) for them to populate in rows of 3 across (grid format) (second screenshot).

Help!? TIA!

Blogs landing page: https://wagan.com/blogs/news

Current:

current.png
current.png396×913 204 KB

Want:

want.png
want.png645×503 191 KB

2

Hi, please try this code

@media screen and (min-width: 1080px) {
    #shopify-section-blog-template .container:nth-of-type(3) {
        display: flex;
        flex-wrap: wrap;
    }
    #shopify-section-blog-template .container:nth-of-type(3) > div:not(:last-child) {
        width: 33%;
    }
}
3

Where does that get inserted at?

Thank you for the reply!!

@media screen and (min-width: 1080px) {
    #shopify-section-blog-template .container:nth-of-type(3) {
        display: flex;
        flex-wrap: wrap;
    }
    #shopify-section-blog-template .container:nth-of-type(3) > div:not(:last-child) {
        width: 33%;
    }
}
4

You need to add this code at the end of file theme.scss that is stored inside yout Theme assets folder.

Remember to do a backup of the theme first by following the guide Duplicating themes

5

THANK YOU SO MUCH!