Studio theme blog grid spacing

Store Design

Topic summary

A user seeks to reduce blog image sizes and increase grid spacing on their Shopify store using the Studio theme.

Initial Solution (Blog Page):

  • Add CSS code to section-main-blog.css in the assets folder to increase column gap
  • Alternative approach: modify base.css, style.css, or theme.css to set card wrapper width to 70% and center articles
  • Both solutions successfully resolved the spacing issue on the main blog page

Follow-up Issue:

  • Same spacing problem appeared when adding a blog section to the homepage
  • Fixed by adding CSS code to theme.liquid file before the </body> tag

Key Technical Details:

  • Solutions use media queries targeting screens 750px and wider
  • CSS modifications involve adjusting .blog-articles column gaps and card wrapper dimensions
  • Multiple implementation methods provided (direct CSS file editing vs. theme.liquid injection)

Status: Resolved - user confirmed both solutions worked successfully

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
9

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