How can I center a multicolumn headline on my webpage?

Technical Q&A

Topic summary

A user needs help centering a multi-column headline (“Get to Know Empirical Water”) on their Shopify website.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes
  • Click Actions → Edit code on the active theme
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add the following CSS code at the bottom:
.title-wrapper.title-wrapper--no-top-margin,
.title-wrapper.title-wrapper-with-link,
.title-wrapper.padded-self-mobile {
  justify-content: center !important;
}
  • Save the changes

The responder included a screenshot showing the expected centered result and requested the original poster mark the solution if it resolves the issue.

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

https://empiricalwater.com/

Please scroll down to the headline, Get to know Empirical Water. I need that line of text centered. Please help.

Thank you

1 Like
2

Hi @empiricalarby

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.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:
.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin {
    justify-content: center !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like