On the blog post page for the Dawn theme, the content is not aligning with the margins of the website, AKA in alignment with the header. I dont have this issue with any of the other pages including the main blog page, only on specific blog posts.
Topic summary
A user reports that blog post content in the Dawn theme doesn’t align with the site header margins, while other pages display correctly.
Root Cause:
The Dawn theme intentionally applies a page-width--narrow class (726px max-width) to blog posts, compared to the standard page-width class (1200px) used elsewhere. This narrower width was designed to improve readability since the blog post editor lacks responsive content controls.
Two Solutions Provided:
-
Code Edit Method: Modify
sections/main-article.liquidby removingpage-width--narrowfrom 5 instances, replacing it with justpage-width. This requires editing theme files directly. -
No-Code Method: Add a “Custom liquid” section below the blog post section in the theme customizer and insert CSS code that overrides the narrow width styling. This approach preserves the ability to update the theme without losing customizations.
Screenshots were shared showing where to add the custom liquid section in the customizer interface.
1 Like
Hi @Szaghal
Can you share me your store url & password (if applicable) then I will check & give you the solution
This is done intentionally.
Because in your blog post editor you can’t really create responsive content, it was decided to limit the width of this section.
Containers inside main “Blog post” section have class page-width–narrow which limits the width of the section to 726 pixels while the rest of the site is usually limited by page-width class which has max width of 1200px.
You can go “edit code”, find sections/main-article.liquid, search and remove this class, for example https://github.com/Shopify/dawn/blob/main/sections/main-article.liquid#L46 – change from
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
to
class="page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
There are 5 lines with this class.
If you do not want to modify theme code (will be helpful when updating theme to newer version), you can instead in Customizer add a “Custom liquid” section right below the “Blog post” one and paste this code:
Hey @Szaghal
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi @Szaghal Thanks for posting the issue. Some steps to follow to resolve–
In the customize option ofn the online store press edit code and use this CSS and adjust-
.article-template__content {
max-width: var(–page-width); /* aligns with your site’s standard width */
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
Let me know if this works for you.
Hey Tim,
Thanks for your reply. Can you explain what you mean by “you can instead in Customizer add a “Custom liquid” section right below the “Blog post” one and paste this code” - when I click to customize the website, I can only add CSS code.
