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?
Hello,
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
wow, what a idea ‘hover to see password’ hahaha
dl.price {
align-items: center;
}
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;}
.template-product .price__regular {
align-self: flex-start;
}
Please add this
@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;}
Hmm, code didn’t seem to work for underline.
I also noticed that recommended products were left out from the center alignment:
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;}
Update: I was able to center recommended products with this code:
.product-recommendations__inner dl.price {
display: block!important;
text-align: center;
}
Still not sure how to remove underlines upon hover. Any thoughts?
To remove border, try this CSS
.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {border-bottom: none !important;}
That worked! Thank you!!
Final code to center-align product titles and prices in both collections and for product recommendations. Code also eliminates underlining upon hover. For Debut theme.
/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
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-recommendations__inner dl.price {
display: block!important;
text-align: center;
}
/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}
Does anyone know how I can use this code, but also have the text of the product title change color upon hovering?
share your site URL
Hello.
Thank you so much for this! Worked perfectly on my computer but it’s a bit skewed still on mobile. Is there a fix for that?
Thanks!
Hi,
Thank you so much for this code, it’s just what I was looking for.
Only there is still one problem… My prices aren’t fully centered. I mean, they seem to be centered, but when you look closer it doesn’t correctly align with the product name.
( → See the attached screenshot please, don’t mind the weird photos, I’m still practicing ;))
Anyone that can help me with this issue? I Would really appreciate it!
Btw: I’m using Debut theme and if you need to be on my website, the password is: skufoh and this is my url: www.bonita-avenue.com
Thanks in advance!
Add this css too
.price dd {
margin: 0 -0.5em 0 0 !important;
}
That worked! Thank you very much!
Thanks for this code that 8 looking for a long time. However, I still have a problem with the price that I cannot center.
Here is te chope that I put :
/== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==/
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-recommendations__inner dl.price {
display: block!important;
text-align: center;
}
/== Removes Underline Upon Hover ==/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}
Can someone help me ?
Thank you so much !!
