How can I resize a sale badge for better mobile view?

[ChrisW3]

Recently added a sale badge to our collection and product pages. Looks fine on desktop but badge is too big on mobile, so it overlaps the product image.

How do we make it smaller so it looks better on mobile:

MOBILE CURRENTLY:

DESKTOP CURRENTLY:

EXISTING CODE

.sale-badge {
background: red;
position: absolute;
color: white;
display:flex;
justify-content:center;
align-items: center;
text-align: center;
z-index: 1;
border-radius: 50%;
top: 0%;
right: 0%;
}

.grid-sale-badge {
width: 5rem;
height: 5rem;
font-size: 1rem;
}

.product-sale-badge {
width: 10rem;
height: 10rem;
font-size: 2rem;
}

[Made4uo-Ribe]

Hi @ChrisW3 

It needs to add media query to change the size in the mobile. And differentsize for the website. Would you mind to share your store? Thanks!

[ChrisW3]

Hi it’s on a preview theme at the moment. I can give you collaborator access. Site is PhysioWorldshop.Co.uk

[Made4uo-Ribe]

Im sorry this dont need a collaborators access. I check your store but I cant see the sale badges. Please, share the prview link with the badge. Thanks!

[ChrisW3]

https://p1o9d85zu7cg6bib-40186413217.shopifypreview.com

[ChrisW3]

BUMP!

Just need to add media query to this can anyone advise?

[ChrisW3]

This is the preview URL: https://p1o9d85zu7cg6bib-40186413217.shopifypreview.com

[Made4uo-Ribe]

Did you already solve this one? I check your mobile screen and it already changed the size.