Centering Compare at Price

Ljkeos
Excursionist
26 0 10

Theme: DEBUT

website: ppf.clothing.com

password: ppf

Hello,

I am currently trying to figure out a way to center the compare at price for products in a product grid.

Screen Shot 2021-06-30 at 11.55.57 PM.png

Here is what it looks like right now. On the webpage, the text is overlapping and I would like to fix that.

This is some of the code I have so far at the end of theme.css that has to do with the centering of text: 

#shopify-section-collection .product-card__title, #shopify-section-collection-template  .product-card__title {

    font-size: 16px !important;
    font-weight: lighter;
}
/*== 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;
}
.price dd {
    margin: 0 -0.5em 0 0 !important;
}


.grid__item--collection-template p {
  text-align: center;
  margin-bottom: 0px;
}

Thank you.

0 Likes
HardikDavra
Shopify Partner
2327 367 999

@Ljkeos  Your website URL is not working.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes