How can I center blog elements on the Dawn theme?

Store Design
, ,

Topic summary

A user seeks help centering various blog elements (posts, dates, headers, titles, etc.) on Shopify’s Dawn theme for their store.

Solutions Provided:

Two support contributors offered CSS-based fixes:

  • Initial centering: Add CSS code to base.css file targeting .article-template and .article__template-social-sharing classes with text-align: center and flexbox properties
  • Blog preview centering: After the initial fix worked, additional CSS was suggested for centering blog preview text on the homepage by targeting .article-card__excerpt within .slider-mobile-gutter
  • Alternative approach: Another contributor recommended adding CSS to center .article-card elements

Status: The original poster confirmed the first solution worked successfully. The discussion appears resolved with multiple working code snippets provided for different blog element centering needs.

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

URL is www.daughterofanangel.com

Password is JENNA

I am trying to center all of the blog posts, date, header, blog title, etc,

Thank you!

2

HI @jennarose

You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.article-template {
text-align: center;
}
.article-template__social-sharing {
display: flex;
justify-content: center;
}
3

Hello @jennarose
I would like to give you some recommendations to support you
you can follow these steps:

  1. Go to Online Store->Theme->Edit code
  2. Open your theme.liquid file, paste the below code before

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages Support Team

4

Thanks! it worked. is there anyway I can center the blog preview on the home page. (under each blog photo)

5

Hello @jennarose
Let’s try adding this code :

.slider-mobile-gutter .article-card__excerpt{
text-align:center !important;
}

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages Support Team

6

Hi @jennarose
You can try to use this code

.article-card {
text-align: center;
}