Product price smaller on mobile view only on collection page (Dawn theme)

[bellevo]

Hey,

Is there a way to reduce the product price size on collection pages for mobile view only? I found a way to adjust the size for desktop but now it’s way too big on mobile view. I couldn’t find a code to only adjust it on mobile. I will add a picture about the issue below.

My store url: bellevodesign.com

The issue:

 

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
   @media screen and (max-width: 768px) {
       .price, .price--on-sale .price-item--regular{
          font-size: 1rem !important;
        }
    }
</style>
 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[bellevo]

Worked perfectly, thank you!

[bellevo]

Do you happen to know how to reduce the padding between the cross over price and the sale price?

[AnneLuo]

Which part? Can you provide a detailed explanation?