How can I modify the blog layout in the Dawn theme?

Store Design
,

Topic summary

A user seeks to modify the blog layout on their Shopify store using the Dawn theme. The solution involves editing the theme’s CSS file:

Steps provided:

  • Locate and open the theme.css file
  • Find the code block for .blog-articles--collage>*:nth-child(3n+1), .blog-articles--collage>*:nth-child(3n+2)
  • Remove the line grid-column: span 2; from this selector
  • Also modify .blog-articles--collage>*:nth-child(3n+2):last-child by removing grid-column: span 2; and text-align: center;

This CSS modification changes how blog articles are displayed in the collage layout by adjusting the grid column spanning behavior. The original poster confirmed the solution worked successfully.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi! How can I change the blog layout on https://www.10xfuel.com/blogs/blog like this:

10xfuel_0-1704890760113.png
10xfuel_0-1704890760113.png1750×788 179 KB

1 Like
2

Hi,

Do into theme.css and fine following code

.blog-articles--collage>*:nth-child(3n+1), .blog-articles--collage>*:nth-child(3n+2):last-child {
    grid-column: span 2;
    text-align: center;
}

and Remove the line of code : grid-column: span 2;

2 Likes
3

perfect - thank you!

1 Like