How can I center align images and headings on my About Us page?

Topic summary

A user seeks help centering the heading and images on their About Us/Our Story page.

Proposed Solutions:

Multiple community members provided CSS code snippets to add to the theme’s base.css or theme.css.liquid file:

  • For centering the page title: Add .main-page-title { text-align: center; } or similar variations targeting the h1 heading element
  • For centering all page content: Target .page-width elements with text-align: center
  • For specific page targeting: One responder suggested adding an additional class to the template for page-specific styling

Implementation Steps:

  1. Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  2. Locate the Assets folder and open base.css, styles.css, or theme.css.liquid (depending on theme)
  3. Add the provided CSS code at the bottom of the file
  4. Save changes

Several responders included screenshots showing the expected centered result. The discussion remains open with no confirmation from the original poster about which solution worked.

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

Hi Thanks in advance

Can you please help me centre align everything on the About us/Our Story Page (The heading - Our Story & the images)

Let me share a link to the page and an image for reference

https://gomyld.com/pages/about-us
password: hiwawa

1 Like

@hitesh469 add below css into base.css file

.main-page-title {
    margin-bottom: 4rem;
    text-align: -webkit-center;
}

Hey

if you want to make it center aligned specifically for a particular page then you need to add a additional class in the template and style it accordingly.

And in case if you want to center align all the pages then simply add the below CSS:

.page-width h1.main-page-title{
text-align:center;
}
.page-width .rte p{
text-align:center;
}

Hi @hitesh469 ,

I understand that you want to centre align everything on the About us/Our Story Page (The heading - Our Story & the images) .

Try this.

  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 “theme.css.liquid, styles.css or base.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:
  4. And Save.
h1.main-page-title.page-title.h0 {
    text-align: center;
}

And if you want to center also the paragraph. You can use this code.

.page-width.page-width--narrow.section-template--18804121108767__main-padding p {
    text-align: center;
}

Result:

I hope it help.

Hi @hitesh469

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 base.css file:

.main-page-title {text-align: center;}

Regards,

San