Change the design of the badge "out of stock"

Hello,
I would like to change the design of this badge which does not look beautiful at all with the translation of “sold out” (cf. attachment). I tried the following CSS:

@media (max-width: 768px)
.labels-rounded .out-of-stock {
max-width: 60px;
font-size: 9px;
}

But it doesn’t work, please help me

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site URL so that we could provide you with custom CSS. If your site is under maintenance, please provide your site admin access in the private area.

Best Regards

Hello,
Ok thank you

Hello,

I cannot login your site, when I insert yousite/wp-admin I see the maintenance page.

Try his custom CSS, if it does not work, provide valid access.

.product-label.out-of-stock {
    font-weight: 900;
    font-size:12px;
}

Best Regards

Hello,
It doesn’t work

I will remove the maintenance site so that you can access it and find a solution.
Thank you

Hello,

Replace the code with this one:

body .product-label.out-of-stock {
    font-weight: 900;
    font-size: 10px;
	  min-width:70px;
}
body .single-product-content .product-images .labels-rounded .product-label {
    min-width:70px;
    min-height: 70px;
}

You will get this result on the product page: https://prnt.sc/sz6md3

And this result https://prnt.sc/sz6mo5

If I try to make the label smaller it is not readable. I did not do an ideal circle on the shop page not to occupy a low of space on the product grid, if you still want an ideal circle, add this line: min-height:70px; under min-width:70px;

Best Regards

[Author]

Posts