Dawn theme center the blog section main heading

Technical Q&A
, ,

Topic summary

A user is attempting to center section headings on their Shopify store using the Dawn theme, but the blog section heading remains left-aligned despite applying CSS code that successfully centers other sections (collections, featured products).

Initial Problem:

  • CSS code works for collection and collage sections
  • Blog section heading refuses to center
  • Screenshot provided showing the misaligned blog heading

Solutions Offered:
Multiple community members provided CSS snippets targeting different selectors:

  • .blog .title--primary with justify-content: center
  • Specific ID selector: h2#SectionHeading-template--16213242708165__df4d2f4a-0699-43e1-b753-fd4fcc8a719f
  • .title-wrapper-with-link.title-wrapper--self-padded-tablet-down.title-wrapper--no-top-margin with justify-content: center

Resolution:
The issue was resolved using the final CSS solution targeting the title wrapper class. Instructions included adding the code to theme.css/base.css/style.css via the Shopify admin’s “Edit Code” section.

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

I’m trying to center all of the main headings of each section of my shop but it I can’t seem to center the one for the blog section.

Store link: https://2bb416.myshopify.com/

I’m using these codes to center the collections and featured.

.collection__title .title, .collage-wrapper-title {
    text-align: center!important;
}

.collection-list-wrapper .title-wrapper-with-link {
    justify-content: center!important;
}

.main-blog .title--primary {
    text-align: center!important;
}
2

Update your code

.collection__title .title, .collage-wrapper-title {
    text-align: center!important;
}
.main-blog .title--primary,
.collection-list-wrapper .title-wrapper-with-link {
    justify-content: center!important;
}
3

Blog section still seems to be not affected

castlefurniture_0-1703059622800.png
castlefurniture_0-1703059622800.png1345×640 54 KB

4

Update code

.collection__title .title, .collage-wrapper-title {
    text-align: center!important;
}
.blog .title-wrapper-with-link,
.collection-list-wrapper .title-wrapper-with-link {
    justify-content: center!important;
}
1 Like
5

Hi @castlefurniture Please add the code in your theme.css/base.css/style.css file which is available in your theme.

h2#SectionHeading-template--16213242708165__df4d2f4a-0699-43e1-b753-fd4fcc8a719f {
    display: grid;
}

.title-wrapper-with-link.title-wrapper--self-padded-tablet-down.title-wrapper--no-top-margin {
    justify-content: center !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1703063461599.png
sahilsharma9515_0-1703063461599.png1831×669 87.6 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

6

Hi @castlefurniture ,
Just write the below CSS in the style file it will center the BLOG POSTS heading.

.title-wrapper-with-link.title-wrapper--self-padded-tablet-down.title-wrapper--no-top-margin {
    justify-content: center;
}

blog-center.PNG
blog-center.PNG1275×761 77.3 KB

7

This worked thank you!