Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
When trying to change the layout of the related products or cross sells either on a product page or in the cart, any overriding CSS doesn’t have any impact.
Below is set in the woocommerce.layer.min integration CSS file. No matter what I do to override it, I cannot get the grid-template-columns value to change. Even when inspecting, it shows that my rule should override it, but the actual layout doesn’t change at all.
The screenshots attached below show the chrome inspect editor and the resulting render on the page. I get the same issue on Safari as on Chrome.
Also when using the element for Related products on the product page, changing the columns value doesn’t add the !important tag to the end, so doesn’t override anyway. Manually adding it in via CSS doesn’t have any impact anyway.
@media (max-width: 991px) {
.cross-sells .products, .related.products .products, .upsells.products .products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
