How do I increase the padding between grid blog posts on Dawn theme?

The settings are set to grid, but they’re too close together for my liking. Is there a way to increase the padding between posts? Here’s the page: https://yellowathletic.myshopify.com/blogs/blog

Also, when I delete the container box behind the text in the header image, it turns the text white. Any ideas how to keep it gray?

Thanks!

2 Likes

Hi @kgpolicy

I understand that you want to make the space between blogs wider and remove the title’s background. You can do this by following the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    background-color: unset;
}

.main-blog .blog-articles {
    gap: 3vw;
}
2 Likes

Hello,

You can adjust the column spacing by using the following CSS:

.blog-articles {
  column-gap: 30px !important;
}

Adding the CSS at the end of your base.css file would look as below:

Regarding your other request about the container box - most probably your theme is changing the HTML structure, but you can try using the below CSS:

.card__information h2, .card__information p {
  color: #5f5e58 !important;
}​

Kind regards,

Gabriel

1 Like

Thank you!

1 Like