Expand content width on blog article template

Store Design

Topic summary

A user seeks to expand the content width of blog articles on their Shopify store. Multiple solutions have been provided:

Recommended approaches:

  • Navigate to Online Store → Themes → Edit Code
  • Locate the base.css file
  • Modify the .page-width--narrow CSS class by adjusting the max-width property

Specific suggestions include:

  • One respondent recommends targeting .article-template .page-width--narrow with max-width: 120rem
  • Another suggests editing section-blog-post.css instead, setting max-width: 130rem
  • A third solution proposes modifying .page-width--narrow with max-width: 123.6rem and padding: 0

All solutions involve CSS modifications to increase the maximum width constraint applied to blog article content. The discussion remains open with no confirmation of which approach the original poster implemented.

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

I want to expand the width of the content on all my blog articles. Can someone help on what modification is needed.

Link: https://www.zuri-craft.com/blogs/the-design-circle/10-stunning-wall-art-ideas-for-living-room-decor-photos-and-tips

1 Like
2

Hi @rishabhmotani ,

Please follow the below steps

  1. Go to online store → Themes → Edit code

  2. Search for base.css and paste the below CSS at the very end of the file

.article-template .page-width--narrow{max-width:120rem;}
3

Hi @rishabhmotani ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-blog-post.css->paste below code at the bottom of the file:

.article-template .page-width {
    max-width: 130rem;
}

PageFlyRichard_0-1678192286449.png
PageFlyRichard_0-1678192286449.png1427×824 334 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
4

websensepro_0-1678242007533.png
websensepro_0-1678242007533.png1348×486 402 KB

login to backend->online store->theme->edit code->base.css->

.page-width–narrow{
max-width: 123.6rem;
padding: 0;
}

then your question will solved

1 Like