Magento 2-自定义样式_listings.less不起作用

Question

我们正在使用波尔图主题。我们的产品清单具有以下样式：

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

我们检查了.less波尔图，它对应于：

  

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

我们拥有样式的地方：

.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);
}

}

我已覆盖文件：

  

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

我要更改的部分是这个：

& 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;
        }
      }
    }
  }
}

基本上我遇到的问题是产品显示的宽度是80％，而不是宽度100％：

80％：

100％：

我运行以下命令：

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

将代码放在@media之外，然后尝试。