Craft 2.0: Centering all text including header and sub-header on collection page

Store Design
, , , ,
1

On our default collection page in Craft 2.0, the theme does not provide options for alligning the header and sub-header. We want our header and sub-header centered on the page on all devices.

I already added this code to center the header (thanks to the posters of this code in the following thread):

https://community.shopify.com/c/shopify-design/how-to-align-to-center-the-collection-title-on-the-main-page/td-p/1824283

Specifically, this is the code that I added to the base.css file.

.collection-hero h1.collection-hero__title {
text-align: center !important;
}

The code worked beautifully; however, I also need the text under the header centered as well. Here is an example collection where the text under the header is not centered:

Screen Shot 2023-05-22 at 9.02.53 AM.png
Screen Shot 2023-05-22 at 9.02.53 AM.png1361×670 249 KB

Thanks, guys.

2

Could you share your store URL to check?

1 Like
3

I messaged you the info, Lucas.

4

Hi @TomMc

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.collection-hero__text-wrapper {

display: flex !important;

flex-direction: column;

align-items: center !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

1 Like
5

You rock, Lucas.

It worked beautifully:

Screen Shot 2023-05-22 at 9.50.59 AM.png
Screen Shot 2023-05-22 at 9.50.59 AM.png1274×621 171 KB

1 Like
6

Yeahhh! You are welcome @TomMc :blush:

7

Hi Lucas, I’m having the same issue centering the collections text on my Shopify store using the Craft theme. I’ve tried adding this code to the base.css as well as a number of other .css codes to no avail. This is the website: https://treehoodies.com/collections/all. Any help resolving this would be greatly appreciated. Thanks!