Magento 2 - Custom style _listings.less not working - magento

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

Place the code out of #media and try.