Center Align Price on Collection Page - Debut Theme

[LLT]

Hi All,

I am trying to centrally align the prices on my collection pages, and Ive come close, but still have a small issue. I have tried a combination of solutions from this forum, which has gotten me to the below code. Problem is, my prices are still slightly left-adjusted, not quite centered. (Note, I started this process with the prices next to each-other, but that looked strange on Mobile, so I decided to stack them instead, which almost got me to a perfect result, just need the last bit of alignment to get them fully centered)

Also, due to stacking the prices, this has also carried over to the product page, where I would like to have the price/compare-price next to each other, i.e. stacked on collection page, next to each other on product page (and of course left aligned on product page, which they currently are).

Hope someone has the answer. thx

Product page (prices should be in the same row and left aligned)

Collection Page (Prices should be stacked, as they are, and fully centrally aligned, which they almost are, but still a bit to the left)

Code used to get to this point in Assets->theme.css:

/*== 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%;
font-size: 15px;
display: block;
text-decoration: none;
text-transform: uppercase;
line-height: 1.6;
}

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

.product-recommendations__inner dl.price {align-items: center;}

.price__sale {
margin-right: 0;
display: block!important;
}

.price__compare dd {
margin-right: 1;
display: block!important;
}

.price__regular dd {
margin-right: 1;
}

.product-card {
text-align: center;
}

.price--on-sale .price__badge--sale {justify-content: center;}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}

/*== Change font on product price on product page ==*/
.price-item {
font-size: 16px !important;
font-weight: 400;
color: #333232 !important;
}

[diego_ezfy]

Hello @LLT,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

[LLT]

https://littleleaftoys.shop/

It would be any of the collection pages as well as the featured collection on the home page, but here's an example

https://littleleaftoys.shop/collections/baby

The site is live, guess you don't need a pw?

EDIT: And of course any of the product pages, where I would like the price/compare-price to be in the same row, i.e. not stacked.

[diego_ezfy]

@LLT, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.price dd{
    margin-right: 0 !important
}

.price__pricing-group .price__sale{
    flex-direction: row !important;
    display: flex !important;
}

.price__pricing-group .price__sale{
    flex-direction: row !important;
    display: flex !important;
}

.price__pricing-group .price__sale dd:first-of-type{
   margin-right: 10px !important;
}

Kind regards,
Diego

[LLT]

Great, that centered it all. just a slight issue occurred on the product page, the "sales badge" is too close to the "Compare price", any chance you have a solution to that?

[diego_ezfy · Accepted solution]

@LLT 

You can follow the previous steps and use this code:

.template-product .product-single__meta .price__badge--sale{
    margin-left: 10px !important;
}

Kind regards,
Diego

[LLT]

Awesome, that did the trick. Thank you so much!

[Jacquline]

Hi can you please also help me? I used the code to make the prices align but now there are too close to each other.

Is there a way to add some space between the two prices?

Thank you so much @diego_ezfy 

 

[Jacquline]

Also it worked great for dekstop but on mobile the prices are still under each other.. any way to make them align on mobile also? 

Thank you  so much @diego_ezfy