How to center text in collection list section

Solved

How to center text in collection list section

YIVAN
Explorer
51 1 16

Hello,

 

I was wondering if there was a way for me to center the text in the collection list section. I tried with some code someone else gave me and it worked but it also centered everything else like the price which I don't want. I just want it to be centered in the specific section.

Screen Shot 2024-06-15 at 10.42.44 AM.png

URL:https://www.yivan.us/

Pass: YIVAN24

Accepted Solutions (3)

devcoders
Shopify Partner
191 31 48

This is an accepted solution.

Hi @YIVAN 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

 

.collection-list .card__heading {
text-align: center;
}

 

devcoders_0-1718466745389.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

devcoders
Shopify Partner
191 31 48

This is an accepted solution.

Hi @YIVAN 

 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code at the TOP of the file.

 

.card__heading {
text-align: center!important;
}

 

 

devcoders_0-1718467854689.png

 



Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

devcoders
Shopify Partner
191 31 48

This is an accepted solution.

Hi @YIVAN 

 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

 

.card__heading.h5 {
text-align: inherit!important;
}

 

devcoders_0-1718468305897.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 9 (9)

devcoders
Shopify Partner
191 31 48

This is an accepted solution.

Hi @YIVAN 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

 

.collection-list .card__heading {
text-align: center;
}

 

devcoders_0-1718466745389.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
YIVAN
Explorer
51 1 16

Thank you worked great, but is there a way to also achieve this on mobile?

Screen Shot 2024-06-15 at 10.54.29 AM.png

devcoders
Shopify Partner
191 31 48

Hi @YIVAN 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

.card__heading {
text-align: center!important;
}

 

devcoders_0-1718467146067.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
YIVAN
Explorer
51 1 16

Im not sure why but the code didn't work for me. There might be another code that is overwriting it?

devcoders
Shopify Partner
191 31 48

This is an accepted solution.

Hi @YIVAN 

 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code at the TOP of the file.

 

.card__heading {
text-align: center!important;
}

 

 

devcoders_0-1718467854689.png

 



Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
YIVAN
Explorer
51 1 16

Ok, that worked. But do you know how to do it so it doesn't affect the product title?

Screen Shot 2024-06-15 at 11.12.26 AM.png

 

devcoders
Shopify Partner
191 31 48

This is an accepted solution.

Hi @YIVAN 

 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

 

.card__heading.h5 {
text-align: inherit!important;
}

 

devcoders_0-1718468305897.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
YIVAN
Explorer
51 1 16

Perfect, thank you.

devcoders
Shopify Partner
191 31 48

Hi @YIVAN 

Great to hear that the issue has been resolved! If my assistance was helpful, please consider liking and accepting the solution. Feel free to reach out if you have any further questions.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!