Center Product Title and Price Under Product Image in Collections

Solved
Highlighted

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?

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
0 Likes
Highlighted

Success.

Globetrotter
626 60 67

@ksachse wrote:

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;}
you are welcome to contact me.
My email - suyash.patankar@gmail.com
1 Like
Highlighted

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;
}

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
0 Likes
Highlighted
New Member
2 0 0

Does anyone know how I can use this code, but also have the text of the product title change color upon hovering?

0 Likes
Highlighted
Globetrotter
626 60 67

share your site URL

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes