How can I center collection text in Sense theme

Store Design

Topic summary

A user seeks help centering collection description text in the Shopify Sense theme. The title is already centered, but the description/info text is not.

Initial Solution Attempt:

  • One responder suggests adding CSS code to component-collection-hero.css:
    .collection-hero__description {
  text-align: center;
}

Final Working Solution:

  • BSS-TekLabs provides a more comprehensive fix after reviewing the site privately
  • Add the following code to base.css or theme.css:
    @media screen and (min-width: 750px) {
  .collection-hero__description {
    max-width: 100% !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
  }
}
  • This solution includes responsive design considerations (desktop screens 750px+) and padding adjustments
  • Screenshots demonstrate the before/after results

Status: Resolved with working CSS implementation

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

VRAAG_SHOPIFY.png
VRAAG_SHOPIFY.png1432×684 84.6 KB

Hello,
How can I center the collection prescription/text? Title is centered but not the info. Thanks in advance!

1 Like
2

Hello @minoulejeune

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find component-collection-hero.css file

  4. Add the following code in the bottom of the file

collection-hero__description{
text-align: center;
}

Thanks

3

Hello @minoulejeune
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

4

Hi, that would be perfect, can I just drop the password here or can I send you a personal message? Sorry I’m new here haha

1 Like
5

You can send it here or via personal message to me.

6

How can I send you a personal message?

7

I sent you a message. Would you please check it.

8
  • Here is the solution for you @minoulejeune
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (min-width: 750px) {
    .collection-hero__description {
    max-width: 100% !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721839357659.png
BSSTekLabs_0-1721839357659.png1911×905 111 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @minoulejeune .
1 Like