0

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%: width: 80%

100%: width: 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;
0

Try this

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

@import 'source/module_listings.less';

After run your command

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.