I am trying to get the padding between the sale and regular price to be equal in both desktop and mobile view. The only way ive been able to achieve the mobile padding it’s currently at is to set the desktop padding super wide. I just want the prices to be centered beneath the images with a few px of padding between them. How can I accomplish this?
Hi @ABdev1 ,
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Wahab Ahmad
The url is www.autobongs.com
This should do:
product-card [ref="priceContainer"] {
/* ensure space between */
column-gap: 5px;
/* make it centred */
--width: max-content;
margin: 0 auto;
}
/* may also make font a bit smaller to fix on narrowest screens */
@media (max-width:480px) {
product-card [ref="priceContainer"] {
--font-size: 1.25rem;
}
}
This is interesting. I’m not sure how you got the compare-at price to be left aligned, while the sale price is right aligned… On my test theme, on any of the pre-made collection sections, I can set the price block’s width to fill, then the alignment pops up with left, center, or right. And both prices align to them.
Is this a custom section again? and if so what are the settings that you see?
Please add this code to Custom CSS in your Theme settings and check again
@media (min-width: 750px) {
html .product-card__content :last-child {
flex-grow: initial !important;
}
html .product-card__content product-price div {
justify-content: center !important;
gap: 8px !important;
}
}
Where code must be added
Result:
Best regards,
Dan from Ryviu: Product Reviews App
Thanks Tim this worked perfectly.