Solved

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

TomMc
Excursionist
29 3 5

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-ma...

 

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

Thanks, guys.

Accepted Solution (1)
PageFly-Lucas
Pathfinder
110 28 27

This is an accepted solution.

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

banned

View solution in original post

Replies 6 (6)

PageFly-Lucas
Pathfinder
110 28 27

Could you share your store URL to check? 

banned
TomMc
Excursionist
29 3 5

I messaged you the info, Lucas. 

PageFly-Lucas
Pathfinder
110 28 27

This is an accepted solution.

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

banned
TomMc
Excursionist
29 3 5

You rock, Lucas.

 

It worked beautifully:

 

Screen Shot 2023-05-22 at 9.50.59 AM.png

PageFly-Lucas
Pathfinder
110 28 27

Yeahhh! You are welcome @TomMc 😊

banned
wildquoteswear
Tourist
3 0 1

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!