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

ChrisW3
Pathfinder
213 1 9

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:

image0 (6).jpeg

 

DESKTOP CURRENTLY:

ChrisW3_1-1705512423456.png

 

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;
}

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
6381 1532 1902

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
ChrisW3
Pathfinder
213 1 9

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

Made4uo-Ribe
Shopify Partner
6381 1532 1902

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

ChrisW3
Pathfinder
213 1 9

BUMP!

 

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

ChrisW3
Pathfinder
213 1 9
Made4uo-Ribe
Shopify Partner
6381 1532 1902

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

Made4uoRibe_0-1705673757630.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.