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

Store Design
,
1

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

IMG_0165.jpg
IMG_0165.jpg1170×2153 166 KB

2

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

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

step.png
step.png1865×854 125 KB

  • 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:

BSSTekLabs_0-1721916915108.png
BSSTekLabs_0-1721916915108.png369×809 72.3 KB

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

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

BSSTekLabs_0-1721917395424.png
BSSTekLabs_0-1721917395424.png964×1418 146 KB

We hope this assists in resolving the issue.

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