Problem: In the Dawn theme, the sale price displays larger than the original price and can wrap to a new line. The goal is to make both prices the same size and align on one line.
Recent inputs:
Notes: CSS (Cascading Style Sheets) adjustments are the proposed fix. The first approach affects all price items on mobile; the second targets the sale price element and impacts all viewports.
Status: Suggestions provided; no confirmation from the original poster that the issue is resolved.
hello, when i added a sale price to my products, the sale price is for some reason bigger than the original price as shown in the image below:
I want to change it so theyre the same size and also fit on the same line, like the image below:
I am using dawn theme
This is my store domain: qmpryp-cx.myshopify.com
and this is my password: chasha
Hi, @ads18922
I can’t find the location of the sale price. Did you finish the settings?
Hi @ads18922
You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
.price .price-item { font-size: 1.3rem !important; }
}
Hello @ads18922
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-price.css
add this code at the end of the file and save.
.price-item.price-item--sale.price-item--last {
font-size: 1.3rem !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
