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
5949 1432 1765

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


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
5949 1432 1765

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


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
5949 1432 1765

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

Made4uoRibe_0-1705673757630.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com