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 · Accepted solution]

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

Step 2:  Search for the file theme.liquid. And add this code before </head>

<style>
@media only screen and (max-width: 768px) {
  .card__inner .card__badge {
    transform: scale(0.8)!important
  }
  .card--media .card__inner .card__content {
    padding: 2px!important 
  }
}
</style>

Result:

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?

[BSSCommerce-B2B]

@lepuffcases, Change the previous code like this

<style>
.card__badge .badge {
  border-radius: 10px !important;
}
@media only screen and (max-width: 768px) {
  .card__inner .card__badge {
    transform: scale(0.8)!important
  }
  .card--media .card__inner .card__content {
    padding: 2px!important 
  }
}
</style>

 Result on mobile and desktop

[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

[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 </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 600px) {
.badge.badge--bottom-left {
    margin-left: -20px !important;
    top: 5px !important;
    position: absolute !important;
    padding: .5rem .6rem !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.