Center Product Title and Price Under Product Image in Collections

[kailasachse]

Hello,

Having a hard time centering product titles and prices underneath the product images on collection pages.

I've tried adding this code to theme.scss.liquid file with no luck.

.price {
 justify-content: center !important; 
}
.product-single__title {
    text-align: center!important;
}

Theme is Debut.

I also want to reduce the size of the price font and enlarge the size of the title font.

Have any suggestions?

[Guleria]

Hello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

dl.price.price--listing {    align-items: center;
}
.h4.grid-view-item__title.product-card__title {    text-align: center;    width: 100%;    display: inline-block;
}

If still not working, please share  store url

Thanks

[kailasachse]

Almost! Now prices just need to be aligned.

This is the website, hover for password.

[Guleria]

wow, what a idea 'hover to see password' hahaha

dl.price {
    align-items: center;
}

[kailasachse]

Lol thanks!

Trying to eliminate any chance of SEO being picked up unnecessarily. ;)

Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.

How do we isolate to just the collections pages?

Also tried to add in code to eliminate underline upon hover but did not work.

Thoughts?

This is code as of now:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;

}

[suyash1 · Accepted solution]

---

@kailasachse wrote:

Lol thanks!

Trying to eliminate any chance of SEO being picked up unnecessarily. ;)

Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.

How do we isolate to just the collections pages?

Also tried to add in code to eliminate underline upon hover but did not work.

Thoughts?

This is code as of now:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;

}

---

to make prices left on only PRODUCT PAGE add following css

.template-product dl.price{align-items: flex-start;}

[Guleria]

.template-product .price__regular {
    align-self: flex-start;
}

Please add this 

[kailasachse]

@suyash1 that worked for alignment! Thank you.

Final question: you know how to remove the underlines from the Titles upon hover?

[suyash1]

---

@kailasachse wrote:

@suyash1 that worked for alignment! Thank you.

Final question: you know how to remove the underlines from the Titles upon hover?

---

add this css

.product-card__title {border-bottom: none;}

[kailasachse]

Hmm, code didn't seem to work for underline.

I also noticed that recommended products were left out from the center alignment:

Underlines still occur upon hoverPrices still left-aligned

This is the current code:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}

.product-card__title {border-bottom: none;}