Why isn't product sold-out opacity working on mobile?

[elgobbo]

Hi,

for some reason, on my store recallclothing.com I cannot make it for the opacity to work on mobile, but only on desktop.

product-bloc.liquid

 {% if product.available==false %} product-soldout {% endif %} 

and in CSS:

.product-soldout {
opacity: 0.4;
}

But I tried to place it in different places in the file product-bloc.liquid but the render only works on Desktop and for some reason on mobile the opacity never changes.

Does anyone have an idea ?

[elgobbo]

Bump. Any idea ?

[elgobbo · Accepted solution]

.product-soldout {
opacity: 0.4;
}
@media (max-width: 767.98px) {
.product-soldout {
opacity: 0.4;
}
}