Center align heading of Blog Post section in Craft Theme

Store Design
1

Hi,

I have added blog post section on different product pages and the homepage. However, all the headings in this are by default left aligned and there is no setting to center align them. Any help on how to do this is appreciated

Website Landing Page: https://www.zuri-craft.com/

The same issue with the left alignment of heading is also on the blog landing page: https://www.zuri-craft.com/blogs/the-design-circle,

Thanks,Rishabh

2

Hi @rishabhmotani

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
.blog .title-wrapper–no-top-margin {flex-direction: column !important; justify-content: center !important; align-items: center !important;}

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

Regards,

San

3

Hi there! It looks like you’d like to center-align your blog post headings on your Shopify store. You can achieve this by modifying your theme’s CSS file. Here’s a step-by-step guide on how to do this:

  1. From your Shopify admin, go to ‘Online Store’ > ‘Themes’.
  2. Find the theme you want to edit and click ‘Actions’ > ‘Edit Code’.
  3. In the ‘Assets’ folder, locate the CSS file, which might be named ‘theme.scss.liquid’ or ‘styles.scss.liquid’, and click to open it.
  4. Add the following code snippet at the end of the file:
/* Center-align blog post headings */
.article__title, .h1.article-grid__title, .blog__title {
  text-align: center;
}

This code targets the blog post headings on your product pages, homepage, and blog landing page, and sets their alignment to ‘center’.

  1. Click ‘Save’ to apply the changes.

After implementing these changes, the headings should now be center-aligned. If you still encounter any issues, please let us know. Good luck with your store, and happy customizing!

We wish you good sales!

SpeedUp.guru team

4

@rishabhmotani
add below css into base.css file

.title--primary {
    text-align: center;
}
.title-wrapper-with-link {
    justify-content: center !important;

}

Ujjaval_0-1679482283156.png
Ujjaval_0-1679482283156.png1584×781 285 KB

Ujjaval_1-1679482327675.png
Ujjaval_1-1679482327675.png1592×797 312 KB

5

I am not able to find the mentioned css files in the asset folder. Can you help? I am using craft theme

6

Since you’re using the Craft theme, the file structure might be slightly different. Please follow these steps to update the CSS for your theme:

  1. From your Shopify admin, go to ‘Online Store’ > ‘Themes’.
  2. Find the Craft theme you want to edit and click ‘Actions’ > ‘Edit Code’.
  3. In the ‘Assets’ folder, locate the ‘main.css’ file and click to open it.
  4. Add the following code snippet at the end of the file:
/* Center-align blog post headings */
.article__title, .h1.article-grid__title, .blog__title {
  text-align: center;
}

This code targets the blog post headings on your product pages, homepage, and blog landing page, and sets their alignment to ‘center’.

  1. Click ‘Save’ to apply the changes.

After implementing these changes, the headings should now be center-aligned. If you still encounter any issues or need further assistance, please don’t hesitate to ask. Good luck with your store, and happy customizing!

We wish you good sales!

SpeedUp.guru team

7

which css file and where to find the css file for changes