Can't get the collection description in the center of the page

Store Design
, , , , , , , , , ,

Topic summary

A user is trying to center a collection description on their Shopify store page but hasn’t been successful despite multiple attempts.

Solution provided:

  • Locate the file component-collection-hero.css
  • Find the CSS selector .collection-hero__title+.collection-hero__description
  • Add the following CSS properties:
    margin-left: auto;
margin-right: auto;

Outcome:
The original poster confirmed the solution worked and thanked the helper. The issue appears to be resolved through this CSS modification that centers the element by setting automatic left and right margins.

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

Hi guys!

I have tried everything but can’t I get the collection description in the center of the page?

Page: https://kingdompetshop.com/collections/dog-collars-leashes

Theme: Refresh

Pw: abcd

kingdom2_0-1725819053517.png
kingdom2_0-1725819053517.png1660×848 102 KB

2

Find ‘component-collection-hero.css’,

search ‘.collection-hero__title+.collection-hero__description’,

wo_0-1725847218291.png
wo_0-1725847218291.png633×359 12.4 KB

add

margin-left:auto;margin-right:auto;

Final code

.collection-hero__title+.collection-hero__description {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    /*add*/
    margin-left: auto;
    margin-right: auto;
}
1 Like
3

Hi @wo Thanks a lot!