How to decrease the sale label mobile version

[lepuffcases]

Hi there,

can anyone help me out with some code to fit in the sales label (renamed to premium) on mobile device? I want to have it upper left above to be sure that my product is display perfectly.

store:www.lepuffcases.nl

[Rahul_dhiman]

Hello @lepuffcases

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

@media screen and (max-width: 749px) {
   .badge { 
    font-size: 9px; 
    padding: .5rem 0.3rem .5rem;
   }  
   .card__badge.top {
    margin: -23px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[BSSCommerce-B2B]

@lepuffcases ,
Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code before

Result:

Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[BSS-TekLabs]

• Here is the solution for you @lepuffcases
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[lepuffcases]

It works! is there still a possibility to change the frame from straight to round?

[lepuffcases]

I forgot to mention that I also want make the adjusment for the desktop version. Could you help me out?

[Rahul_dhiman]

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

@media screen and (max-width: 749px) {
.badge {
border-radius: 10px !important;
}
}

result

Thanks

[BSSCommerce-B2B]

@lepuffcases , Change the previous code like this

Result on mobile and desktop