How to align title of product with price

Solved

How to align title of product with price

YIVAN
Explorer
51 1 16

Hello,

 

I was wondering how I could align the title of the product with the price. Currently the title of the product is centered while the price is position on the left I would like the title to also be on the left.

Here is how it looks:

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

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

Pass: YIVAN24

Thanks in advance

Accepted Solutions (2)
BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an accepted solution.

Hi @YIVAN, Pls insert this code to your file css: 

 

 

.collection .card__content .card__heading.h5 a {
    text-align: left !important;
}

 

 

Here is result: 

BSSCommerceHDL_0-1718430846601.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

GTLOfficial
Shopify Partner
290 52 54

This is an accepted solution.

Hello @YIVAN 

Please use this css

Go to Online Store----------->Theme-------------> Edit code------------> find a file "base.css" add this CSS in the very last 

#ProductGridContainer #product-grid .grid__item .card__information a {
    text-align: left !important;
}


 Please let me know
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 5 (5)

YIVAN
Explorer
51 1 16

I figured out why the title was centered in the first place. It was because I used a piece of code to center text in the collection list section.

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

This was the code I used for that:

<style>
.card__information .full-unstyled-link{
text-align: center !important;
}
</style>

 

I still want to keep this text centered but the product titles to be aligned on the left.

BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an accepted solution.

Hi @YIVAN, Pls insert this code to your file css: 

 

 

.collection .card__content .card__heading.h5 a {
    text-align: left !important;
}

 

 

Here is result: 

BSSCommerceHDL_0-1718430846601.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

techlyser_web
Shopify Partner
1849 345 373

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .price {
      text-align: center !important;
  }
</style>

techlyser_web_0-1718430254821.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
YIVAN
Explorer
51 1 16

Thank you for your time. However I wanted the title of the product to match with the price on the left side. I don't want it to be centered. Sorry If I explained it poorly.

GTLOfficial
Shopify Partner
290 52 54

This is an accepted solution.

Hello @YIVAN 

Please use this css

Go to Online Store----------->Theme-------------> Edit code------------> find a file "base.css" add this CSS in the very last 

#ProductGridContainer #product-grid .grid__item .card__information a {
    text-align: left !important;
}


 Please let me know
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh