2

If i change the css in the grid view, but and the css will also apply to the list view, which is i don't want it.

How can i solve that?

Thank you.

0

You can set the nesting selectors for each different class in the same view (like the @Haim said), or just divide into two LESS files imported into your _module.less for the Catalog module and set the parent nesting with each class so you have everything in a better order & modular.

0

There's a parent class name that differentiates between list and grid view. For list view use .products-list and for grid view use .products-grid.

If you just set:

.product-item-name > a, .product.name  > a {
    color: red;
    text-decoration: none
}

Then the item name will be red whether in grid or list view.

if you add the product-list selector then it will only affect the list view.

.products-list .product.name a {
    color: red;
    text-decoration: none
}

if you add the product-grid selector then it will only affect the grid view

.products-grid .product.name a {
    color: red;
    text-decoration: none
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.