I want to decrease the size of discount % on phone version of my website

[attackon]

the discount % and coming soon are looking pretty big on my phone hiding the design on my t-shirt whose store link is https://swawe.store/ and password - omg

[oscprofessional]

Hello @attackon 

Follow the steps
Go to Online Store > Theme > Edit Code > base.css file 

@media screen and (max-width: 749px) {
.badge {
font-size: 10px;
padding: .5rem 0.7rem .3rem;
}

}

Thanks

[BSS-TekLabs]

- Here is the solution for you @attackon 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (max-width: 600px) {
.card__badge .badge {
    padding: .4rem 1rem .4rem !important;
    font-size: 1.1rem !important;
}
}

- Here is the result you will achieve:

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

[BSS-TekLabs]

Hi @attackon,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (max-width: 749px) {
    .card__badge span {
        /* You can adjust this value according to your preference */
        font-size: 8px;
        padding: 0.25rem 0.5rem;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!