Different product card price font size on desktop and mobile

Store Design
, ,

Topic summary

A user is attempting to adjust product card price font sizes specifically for mobile devices in Shopify’s Dawn 15.0 theme. Their CSS code targeting .price classes with a media query works for desktop but fails on mobile.

Proposed Solutions:

  • Use more specific selectors like .price__regular .price-item--regular instead of generic .price classes
  • Place the CSS in component-price.css rather than assets/base.css
  • One responder noted a typo in the original selector (.price_item vs .price-item)

Current Status:
The discussion remains open with multiple helpers offering similar CSS solutions. The original poster shared a preview link to their draft theme but hasn’t confirmed whether any proposed fixes resolved the issue. Follow-up requests for confirmation are pending.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to optimize some of the font sizes on mobile. I’m using Dawn 15.0. I’ve successfully changed the font of the price on product cards with code in assets/base.css but the same method isn’t working when I try to adjust them for mobile. I’ve successfully changed other fonts and their size on desktop/mobile, so I’m a little confused why it suddenly doesn’t work in this case.

My code:

@media screen and (max-width: 768px){
    .price,
    .price__regular,
    .price__sale,
    .price_item {
        font-size: 8px !important;
    }
}

Thank you for your time.

2

Hey @BlueJackal could you please share the store URL so that I take a look and provide you solution code based on your theme file classes.
Thanks

3

Thank you for replying. I’m working on a draft theme, so here is the preview link: https://qbaewr503muue6lw-67686367540.shopifypreview.com

4

Instead of using the previous code consider using this code. Your previous code couldn’t target the price of the product.

@media only screen and (max-width: 768px){
.price__regular .price-item--regular{
font-size: 8px !important;
}
}

Paste this code in the component-price.css theme file.

5

You can use this css, this css is used in your theme for app card. By modifing this you can put in your theme.css It will work

@media only screen and (max-width: 768px){
  .price__regular .price-item--regular,
  .price__sale,
  .proce-item--last{
    font-size: 8px !important;
  }
}

Let us inform anything else you need.
Thank you

6

Hi @BlueJackal

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update? Attach pictures so I can better understand your problem.

7

Hi @BlueJackal

Just a quick check in, do you still need help? If yes, please share your store URL so I can take a closer look
Best,
Daisy