Center the blog title

Store Design
,

Topic summary

A Shopify store owner using the BLOGGLE app seeks to center-align their blog article titles, brand statement, and date, which currently appear right-aligned.

Solutions Provided:

Multiple community members offered CSS-based solutions with similar approaches:

  • Method 1: Add CSS code to theme.liquid file before the </body> tag
  • Method 2: Insert CSS into base.css file at the bottom
  • Method 3: Use media queries for responsive centering (separate desktop and mobile styling)

All solutions target the .article-template class with text-align: center property.

Key Technical Details:

  • Modifications require accessing Shopify Admin → Online Store → Themes → Edit Code
  • CSS targets article header elements with .page-width and .article-template classes
  • One solution includes responsive design considerations with @media queries for different screen sizes

Outcome: The issue was successfully resolved, with the original poster confirming the solution worked.

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

HELLO EVERYONE,

I would like to change the article title from the right to the center of the page. I want to have BRAND STATEMENT and the DATE in the center.

P.S: I use BLOGGLE app to create my blogs.
Store: https://400fdf-32.myshopify.com/

Password: MaisonMagdalena.222
How can I do that? Thanks a loooot :kissing_face_with_closed_eyes:

Capture d’écran 2024-05-22 à 11.35.48.png
Capture d’écran 2024-05-22 à 11.35.48.png2878×1492 327 KB

1 Like
2

Hello @MagdalenaBB

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

article header.page-width.page-width--narrow{ text-align: center; }

techlyser_web_0-1716371180523.png
techlyser_web_0-1716371180523.png1306×456 109 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.article-template .page-width--narrow {
text-align: center;
}

ZestardTech_0-1716371235714.png
ZestardTech_0-1716371235714.png1831×644 166 KB

4

@MagdalenaBB

Please add the following code at the bottom of your css file.

//for desktop
@media screen and (min-width: 750px){
.article-template>*:first-child:not(.article-template__hero-container) {    
    text-align: center;
}
}

//for mobile
.article-template>*:first-child:not(.article-template__hero-container) {
    margin-top: calc(5rem + var(--page-width-margin));
    text-align: center;
}

Hope this helps.

5

Hello @MagdalenaBB ,

I understand you are looking to display the article title on the center of the page.

You can implement this change with the below-mentioned CSS code.

Add the code at the bottom of the theme.liquid file before tag and save.

Output -: https://prnt.sc/M1rs0uNx6FGm

Anshul_arora_0-1716372107264.png
Anshul_arora_0-1716372107264.png1586×815 171 KB

I hope the code helps you.

Please share if you have any queries.

Thank you.

1 Like
6

AMAZING! Thank you! It worked :heart_eyes: