How to change sale label/badge on collection list and product page

[KrzysztofAKKIN]

Hello,

I have a problem with the size of my sale label/badge on mobile view. It is very small and I can't change it. I was trying a couple of methods and none of them worked. The size on the desktop view is okay, but on the mobile view it is minimal.

link to my website: https://nuuni.pl/

 

[namphan]

Hi @KrzysztofAKKIN,

Please go to Actions > Edit code > Assets > pre_theme.min.css file and paste this at the bottom of the file:

@media screen and (max-width: 800px) {
.label_style_rectangular .nt_label {
    padding: 5px 6px !important;
    min-width: 100px !important;
    font-size: 18px !important;
}
}

[Amanda_Fordeer]

@KrzysztofAKKIN,

Have you tried any Product Labels apps? You should install one to adjust the size of your labels on mobile. 

[ryan_sandstone]

Hi,

I looked in the CSS and this is coming from a scaling down of the badge.  I'm not sure why this is being done.  You can fix it by finding this section of CSS in the "style.css" file:

It can be found by performing a search for "nt_labels".  Remove these 2 lines:

transform: scale(.6);
-webkit-transform: scale(.6);

Be aware that other badges or labels on your site may scale up in size.  So check those out and be sure this is the effect you want.  If it is not, then the solution may be more complicated.  Let me know if that is something you would like more help with.