How can I resize the sale badge on my Envy theme website?

Store Design
1

The sale badge on our current website is too big on mobile and looks funky, would love to be able to decrease it but just don’t know how to. Any help would be appreciated :slightly_smiling_face:

Website: www.wearthepeace.com

2

hi @MuradNofal ,

if you want adjust on the mobile about sale badge, this is solve to you.

@media screen and (max-width: 760px){

.sale-badge, .sold-out-badge{

font-size: 13px;

line-height: 13px;

padding:7px 12px;

}

}

you can copy short code above to /assets/custom.css
Hope will helpful to you!

1 Like
3

@MuradNofal
if you want adjust on the mobile about sale badge, this is solve to you.

@media screen and (max-width: 760px){

.sale-badge { padding:7px 12px; }

}

you can copy short code above to /assets/custom.css
Hope will helpful to you!

1 Like
4

Hello @MuradNofal , Please try this code.

@media screen and (max-width: 760px){
    .sale-badge, .sold-out-badge {
		padding: 6px 12px;
	}
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->custom.css.liquid

1 Like
5

Thank you for your help!

6

Thank you for your help!