Studio theme blog grid spacing

[Bebby]

Hi Everyone

I am building a blog for our website but would like to make the size of the images smaller and the space between the grid larger.  This is what it looks like at the moment -

Many thanks for any help.

[Abdosamer]

Hi @Bebby , can you share your store url?

[Bebby]

Hi Abdosamer

The url is https://www.oxfordcamera.co.uk/blogs/oxford-in-focus

I have looked for the blog css file in the coding, please could you tell me where I might find it ?

Many thanks

[Abdosamer · Accepted solution]

@Bebby , You can find it in the assets folder of your theme, or you can add it to theme.liquid file at the end of it before the </body> tag like this :

<style>
@media(min-width:750px){

.blog-articles {
  
    column-gap: 8rem !important;
}

}

</style>

[Bebby]

Thank you so much this has worked great 😀

[Abdosamer]

You're very welcome!

[Bebby]

Many thanks for your help with the Blog grid.

I have just put a blog section on the home page and have the same problem there.

Is there a fix for this ?

Many thanks

[Abdosamer]

@Bebby , Go to your theme.liquid file and add the following code before the </body> tag :

<style>
@media(min-width:750px){
.blog__posts.articles-wrapper {
    gap:8rem !important;
}
}
</style>

Result:

[Bebby]

Once again, many thanks for your help 😀

[Abdosamer]

Hi @Bebby , Go to section-main-blog.css file and add the following code :

@media(min-width:750px){

.blog-articles {
  
    column-gap: 8rem !important;
}

}

Result:

[Made4uo-Ribe]

Hi @Bebby 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 750px) {
   .blog-articles .card-wrapper {
    width: 70% !important;
}

.blog-articles__article.article.scroll-trigger.animate--slide-in {
    justify-content: center;
}
}

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!