Solved

Help me arrange my blog post

Vince111
Explorer
51 3 2

PLEASE HELP, i need help with my blog post page.

i want it to look like this. All blog post will show in one page and at the same time the layout is square and the color is white. See below

Vince111_0-1713622899649.png

 

Vince111_1-1713622899640.png

 

 

While my blog post right now look like this:

 

Vince111_2-1713622899743.png

😞very ugly

 

store: maevincollection.com

Accepted Solution (1)

theycallmemakka
Shopify Partner
1482 337 360

This is an accepted solution.

Hi @Vince111 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.blog-articles .card__inner.color-scheme-2.gradient {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    min-height: 100%;
}
.blog-articles {
    row-gap: 10px;
}
@media screen and (min-width: 750px) {
    .blog-articles {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 10px;
    }
}

.article-card__excerpt:after {
    content: "Read More";
    margin-top: 10px;
    display: block;
    opacity: 0.56
}
</style>

 

theycallmemakka_0-1713634301446.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 2 (2)

theycallmemakka
Shopify Partner
1482 337 360

This is an accepted solution.

Hi @Vince111 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.blog-articles .card__inner.color-scheme-2.gradient {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    min-height: 100%;
}
.blog-articles {
    row-gap: 10px;
}
@media screen and (min-width: 750px) {
    .blog-articles {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 10px;
    }
}

.article-card__excerpt:after {
    content: "Read More";
    margin-top: 10px;
    display: block;
    opacity: 0.56
}
</style>

 

theycallmemakka_0-1713634301446.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Vince111
Explorer
51 3 2

Hi, thank you it worked, however I want it to show all my blogs in one page only. Like, they will scroll only all the way down. How can i do that?

Vince111_0-1713659236899.jpeg