How to Remove Margins on Blog Post Pages in Shopify (Dawn Theme)?

[ShayP1]

Hello everyone,

I’m trying to remove all margins on this specific blog post page in my Shopify store using the Dawn theme. My goal is to make the content stretch fully across the width of the screen, with no extra spaces or margins.

I’ve tried modifying the CSS by adjusting the .page-width class and specifically targeting blog post pages, but the changes don’t seem to apply correctly. Here’s what I’ve tried:

.page-width {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

And also targeting blog posts with:

article.article-template {
    margin: 0 !important;
    padding: 0 !important;
}

However, the margins persist, possibly due to default styles or other classes in the Dawn theme.

Does anyone have a precise method to remove the margins specifically on blog post pages without affecting the rest of the site?

Thanks in advance for your help! 😊

[Made4uo-Ribe]

Hi @ShayP1 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 990px){
section#shopify-section-template--22487101178184__main .article-template__content.page-width.page-width--narrow {
    max-width: 100% !important;
    padding: 0 5rem;
}

• And Save. 
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ShayP1]

Thank for your solution but unfortunately that didn't work for me... Still trying to find how to do it.

 

[Made4uo-Ribe · Accepted solution]

Im not sure why your base.css have <style> tag that is not belong to the that file. You can add on the theme.liquid. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 990px){
section#shopify-section-template--22487101178184__main .article-template__content.page-width.page-width--narrow {
    max-width: 100% !important;
    padding: 0 5rem;
}
</style>

• And Save. 
• Note: if you dont remove the style tag on the base.css all code you paste after that code wont work. 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ShayP1]

Tks a lot! Works fine now. I'll remove the style tag in base.css

Best