Dawn draw cart pricing resize

[GeeMan88]

Hi there, does anyone know how to resize all the currency digits in the dawn theme draw cart mobile view? I have this issue where the currency value sits above the digits if they go over 4 digits long.

[Moeed]

Hey @GeeMan88 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[GeeMan88]

https://www.mzansicouture.co.za/

[GeeMan88]

If you add to the cart in mobile, you will see the currency values are above the pricing if you have 3 digits or above

[Moeed · Accepted solution]

Hey @GeeMan88 

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>
@media screen and (max-width: 767px) {
s.cart-item__old-price.price.price--end {
    font-size: 13px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[GeeMan88]

Awesome, thank you so much, that worked! Is it maybe possible to do the pricing under the heading as well, as thats the only one left with the issue now

[GeeMan88]

Hi there, thank you for your time in helping with the coding, but unfortunately this solution does not change the sizing of the pricing in the cart draw

[Small_Task_Help]

Hi,

Add custom css at base.css

CSS example

@media screen and (max-width: 749px) {
  .drawer__cart-item-price .price {
    font-size: 1.2em; /* Adjust font size as needed */
    white-space: nowrap;
  }

  .drawer__cart-item-price .price .money {
    display: inline-block;
    vertical-align: middle; /* Aligns currency and digits */
    font-size: 1em; /* Adjust the currency symbol size */
  }
  
  .drawer__cart-item-price .money {
    letter-spacing: -0.5px; /* Slight letter spacing to prevent wrapping */
  }
}