Centering Compare at Price

Solved
Ljkeos
Excursionist
26 0 10

Theme: DEBUT

website: ppfclothing.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.

Ljkeos_0-1625148058542.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.

dmwwebartisan
Shopify Partner
7402 1754 2353

This is an accepted solution.

@Ljkeos 

Please add the following code at the bottom of your assets/theme.css file.

.template-collection .price dd {
    margin: 0 0.5em 0 0 !important;
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Ljkeos
Excursionist
26 0 10

Thank you! I used a margin of 0.2 to get the best look for the price spacing.

Ljkeos
Excursionist
26 0 10

@dmwwebartisan How would I change the spacing for the product page and the recommended products? It seems to be overlapping on those two as well.

Here are some pictures:

Screen Shot 2021-07-01 at 7.41.45 AM.pngScreen Shot 2021-07-01 at 7.41.59 AM.png

dmwwebartisan
Shopify Partner
7402 1754 2353

This is an accepted solution.

@Ljkeos 

Please add the following code at the bottom of your assets/theme.css file.

.product__price .price dd {
    margin: 0 0.5em 0 0!important;
}
.product-recommendations__inner .price--on-sale .price__sale{
justify-content: center;
}
.product-recommendations__inner .price dd {
    margin: 0 0.5em 0 0!important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Ljkeos
Excursionist
26 0 10

Thank you again! You are a savior.

Ljkeos
Excursionist
26 0 10

@dmwwebartisan Last question, it seems these edits have slightly offset the rest of them, Is there a way to fix these prices?

Here is an image:

Screen Shot 2021-07-01 at 8.07.22 AM.png

 Thank you once again.

dmwwebartisan
Shopify Partner
7402 1754 2353

@Ljkeos 

Please add the following code.

.price__regular, .price__sale {
    margin-right: 0px !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Ljkeos
Excursionist
26 0 10

Thank you!