How To Change The Blog Post Width

Shopify Discussion

Topic summary

Issue: A user wants to increase the width of their Shopify blog post content.

Initial Solution: A CSS code snippet was provided to modify the .page-width--narrow class, setting max-width to 1200px and adjusting table styling.

Problem Encountered: The user received an error message when attempting to save the custom CSS (“Correct the errors to save your custom CSS”). A screenshot was shared showing the error.

Alternative Solutions Offered:

  • A simplified CSS version targeting article.article-template .page-width--narrow without !important flags
  • A workaround using a custom liquid section with <style> tags instead of the custom CSS field

Status: The discussion remains open with multiple solutions proposed but no confirmed resolution yet.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi, We would like to widen the width of the blog content. Can someone help me with this?

https://j4ndis7keq2oxigm-81021141316.shopifypreview.com/blogs/examenrooster/articles?preview_key=06aacdf5c797ce93329200b826f67b8f

2

Hi @User026

Add this CSS to to the blog post > custom CSS section.

.section .page-width--narrow{max-width:1200px!important;margin:0 auto}
.article-template table{width:100%!important;max-width:100%!important}
.article-template td{padding:12px 15px}

Hope that helps.

3

Hi Micheal, I am getting a error code named ‘‘Correct the errors to save your custom CSS.’’

Schermafbeelding 2025-03-16 om 16.15.07.png
Schermafbeelding 2025-03-16 om 16.15.07.png2874×1482 501 KB

4

Add this css in custom css file

article.article-template .page-width–narrow {
max-width: 1200px;
}

5

Hi @User026

Ok, try this. Add a custum liquid section on your blog post template and add the following code.
1 Like