Magento 2 - Custom style _listings.less not working

Question

We are using Porto theme. We have our product list with the style:

<div class="product details product-item-details"> code </div>

We checked the porto .less which corresponds to:

app\design\frontend\Smartwave\porto\Magento_Catalog\web\css\source\module_listings.less

Where the part where we have the style:

.products-list {
    .product {
        &-item {
            display: table;
            width: 100%;
            padding: 10px 0;

            &-info {
                display: table-row;
                text-align: left;

                &:after {
                    display: table;
                    content: '';
                    clear: both;
                }                
            }
            &-photo {
                width: 20%;
                display: block;
                float: left;
                margin-bottom: 20px;
            }
            &-details {
                display: block;
                width: 80%;
                padding: 0 0 20px 20px;
                float: left;

                .actions-primary {
                    display: inline-block;
                }
                .actions-secondary {
                    margin-left: 2px;
                }
            }
            &-name {
                font-size: 18px;
                line-height: 1;
                margin: 10px 0;
            }
            .product-reviews-summary {
                background: none;
            }
        }
    }
    .product-image-wrapper {
        &:extend(.abs-reset-image-wrapper all);
    }
}

I have overwritten the file:

app\design\frontend\Smartwave\porto_customTheme\web\css\source\module_listings.less

And the part I want to change is this one:

& when (@media-common = true) {

  .products-list {
    .product {
      &-item {
        display: table;
        width: 100%;
        padding: 10px 0;
        &-details {
          display: block;
          width: 100%;
          padding: 0 0 20px 20px;
          float: left;
        }
      }
    }
  }
}

Basically the issue I have is that the products show with width: 80% instead of width 100%:

80%:

100%:

I run these commands:

rm -rf pub/static/*;
php bin/magento setup:upgrade;
php bin/magento setup:di:compile;
php bin/magento setup:static-content:deploy ca_ES;
php bin/magento setup:static-content:deploy es_ES;
php bin/magento setup:static-content:deploy;

Answer 1

Try this

import your less file to vendorname/yourtheme/web/css/themes.less this less

@import 'source/module_listings.less';

After run your command