Align blog post margins to header - Dawn Theme

[Szaghal]

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. 

 

[BiDeal-Discount]

Hi @Szaghal 

Can you share me your store url & password (if applicable) then I will check & give you the solution

[tim · Accepted 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:

<script>
  document.querySelectorAll('.page-width--narrow')
    .forEach(e=> e.classList.remove('page-width--narrow'));
</script>

[Szaghal]

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. 

[tim]

This:

 

And paste here:

[Moeed]

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

[Dotsquares]

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.