How change Product Card Title and Price Font Size Seperately Between Desktop and Mobile | Dawn Theme

[namestolen]

I did some searching around before I came here to ask and I found some code that will change the product card title and price font size for my entire site...

.card__heading {
    font-size:20px !important;
}
.price {
    font-size: 15px !important;
}

by placing this code into assets/component-card.css

but when I viewed my site via mobile the font was way too big and messed everything up.

So I'd like to be able to change my product card font size for both the title and price AND also for desktop and mobile separately.  Any ideas?

[Moeed · Accepted solution]

Hey @namestolen 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
<!-- FOR DESKTOP -->
@media screen and (min-width: 768px) {
.card__heading {
    font-size:20px !important;
}
.price {
    font-size: 15px !important;
}
}
<!-- FOR MOBILE-->
@media screen and (max-width: 767px) {
.card__heading {
    font-size: 20px !important;
}
.price {
    font-size: 15px !important;
}
}
</style>

Adjust this font size accordingly for desktop and mobile and then it should be good.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[namestolen]

Unfortunately this did not change my mobile font size on my product cards.

[Moeed]

Hey @namestolen 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[namestolen]

So I was able to fix the problem.  I put this code:

@media screen and (min-width: 768px) {
  .card__heading {
    font-size: 20px !important;
  }
  .price {
    font-size: 15px !important;
  }
}
@media screen and (max-width: 767px) {
  .card__heading {
    font-size: 10px !important;
  }
  .price {
    font-size: 8px !important;
  }
}

in the custom css of the featured collection section of my site and that worked.  I removed the

<!-- FOR DESKTOP -->

<!-- FOR MOBILE-->

part of your code and that fixed the issue.  I'm not sure if it was assumed that I should take out that code or not, I'm a newby when it comes to this coding stuff, but it worked after I took it out.

[namestolen]

I do have one more question if you wouldn't mind humoring me.  Now that I have control over the title and price font size...I just realized that when I put an item on discount it shows the slashed out original price in the product card as well...and that has a separate font size.  What is the specific code for changing that font size as well?