0

in my Luma category products in mobile mode, I see two products per line as in photos. Would I like to see only one product per line larger then scroll down to see the others?

enter image description here

       // /**
    //  * Copyright © 2013-2017 Magento, Inc. All rights reserved.
    //  * See COPYING.txt for license details.
    //  */

    //
    //  Variables
    //  _____________________________________________

    @product-name-link__color: @text__color;
    @product-name-link__color__active: @text__color;
    @product-name-link__color__hover: @text__color;
    @product-name-link__color__visited: @text__color;

    @product-name-link__text-decoration: none;
    @product-name-link__text-decoration__active: @link__hover__text-decoration;
    @product-name-link__text-decoration__hover: @link__hover__text-decoration;
    @product-name-link__text-decoration__visited: @link__hover__text-decoration;

    @product-item__hover__background-color: @color-white;
    @product-item__hover__box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, .3);

    //
    //  Common
    //  _____________________________________________

& when (@media-common = true) {
    //  Product Lists
    .products {
        margin: @indent__l 0;
    }

    .product {
        &-items {
            &:extend(.abs-reset-list all);
        }

        &-item {
            vertical-align: top;

            .products-grid & {
                display: inline-block;
                width: 100%/2;
            }

            &:extend(.abs-add-box-sizing all);

            &-name {
                &:extend(.abs-product-link all);
                -moz-hyphens: auto;
                -ms-hyphens: auto;
                -webkit-hyphens: auto;
                display: block;
                hyphens: auto;
                margin: @indent__xs 0;
                word-wrap: break-word;
            }

            &-info {
                max-width: 100%;
                width: 152px;

                .page-products & {
                    width: 240px;
                }
            }

            &-actions {
                display: none;

                .actions-secondary {
                    > .action {
                        &:extend(.abs-actions-addto all);
                        &:before {
                            margin: 0;
                        }

                        span {
                            &:extend(.abs-visually-hidden all);
                        }
                    }
                }
            }

            &-description {
                margin: @indent__m 0;
            }

            .product-reviews-summary {
                .rating-summary {
                    margin: 0 4px 0 0;
                }

                .reviews-actions {
                    font-size: @font-size__s;
                    margin-top: 5px;
                    text-transform: lowercase;
                }
            }

            .price-box {
                margin: @indent__s 0 @indent__m;

                .price {
                    font-weight: @font-weight__bold;
                    white-space: nowrap;
                }

                .price-label {
                    .lib-css(color, @text__color__muted);
                    font-size: @font-size__s;
                }
            }

            .old-price {
                margin: @indent__xs 0;

                .price {
                    font-weight: normal;
                }
            }

            .minimal-price {
                .price-container {
                    display: block;
                }
            }

            .minimal-price-link {
                margin-top: @indent__xs;
            }

            .price-from,
            .price-to {
                margin: 0;
            }

            .tocompare {
                .lib-icon-font-symbol(
                @icon-compare-full
                );
            }

            .tocart {
                .lib-font-size(13px);
                border-radius: 0;
                line-height: 1;
                padding-bottom: @indent__s;
                padding-top: @indent__s;
                white-space: nowrap;
            }
        }
    }

    .column.main {
        .product {
            &-items {
                margin-left: -@indent__base;
            }

            &-item {
                padding-left: @indent__base;
            }
        }
    }

    .price-container {
        .price {
            .lib-font-size(14);
        }

        .price-including-tax + .price-excluding-tax,
        .weee {
            margin-top: @indent__xs;
        }

        .price-including-tax + .price-excluding-tax,
        .weee,
        .price-including-tax + .price-excluding-tax .price,
        .weee .price,
        .weee + .price-excluding-tax:before,
        .weee + .price-excluding-tax .price {
            .lib-font-size(11);
        }

        .weee {
            &:before {
                content: '(' attr(data-label) ': ';
            }

            &:after {
                content: ')';
            }

            + .price-excluding-tax {
                &:before {
                    content: attr(data-label) ': ';
                }
            }
        }
    }

    .products-list {
        .product {
            &-item {
                display: table;
                width: 100%;

                &-info {
                    display: table-row;
                }

                &-photo {
                    display: table-cell;
                    padding: 0 @indent__l @indent__l 0;
                    vertical-align: top;
                    width: 1%;
                }

                &-details {
                    display: table-cell;
                    vertical-align: top;
                }
            }
        }

        .product-image-wrapper {
            &:extend(.abs-reset-image-wrapper all);
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .products-list .product {
        &-item {
            table-layout: fixed;

            &-photo {
                padding: 0 @indent__s @indent__s 0;
                width: 30%;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .product-item-info {
        .products-grid & {
            &:hover,
            &.active {
                .lib-css(background, @product-item__hover__background-color);
                .lib-css(box-shadow, @product-item__hover__box-shadow);
                border: 1px solid @color-gray-light2;
                margin: -10px;
                padding: 9px;
                position: relative;
                z-index: 2;

                .product-item-inner {
                    display: block;
                }
            }
        }
    }

    .product-item-inner {
        .products-grid & {
            .lib-css(background, @product-item__hover__background-color);
            .lib-css(box-shadow, @product-item__hover__box-shadow);
            border: 1px solid @color-gray-light2;
            border-top: none;
            left: 0;
            margin: 9px 0 0 -1px;
            padding: 0 9px 9px;
            position: absolute;
            right: -1px;
            z-index: 2;
        }
    }

    .product-item-actions {
        display: block;

        .products-grid & {
            margin: -@indent__s 0 @indent__s;
        }

        .actions-primary + .actions-secondary {
            display: table-cell;
            padding-left: 10px;
            width: 50%;

            > .action {
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .actions-primary {
            display: table-cell;
        }
    }

    .page-products {
        .products-grid {
            .product-item-inner {
                &:before {
                    .lib-css(background, @product-item__hover__background-color);
                    content: '';
                    height: 3px;
                    left: 0;
                    position: absolute;
                    top: -2px;
                    width: 100%;
                    z-index: 1;
                }
            }
        }

        .product-item-actions {
            position: relative;
            z-index: 1;
        }
    }

    .products-grid {
        .product-item-info {
            &:not(:hover) {
                &:not(.active) {
                    .product-item-inner {
                        &:extend(.abs-visually-hidden-desktop-s all);
                    }
                }
            }
        }
    }

    .products-grid {
        .product-item {
            margin-bottom: @indent__base;
            width: 100%/3;
        }
    }

    .page-products,
    .page-layout-1column,
    .page-layout-3columns,
    .page-products.page-layout-1column,
    .page-products.page-layout-3columns {
        .products-grid {
            .product-item {
                width: 100%/3;
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products {
        .products-grid {
            .product-item {
                width: 100%/3;
            }
        }
    }

    .page-products.page-layout-1column {
        .products-grid {
            .product-item {
                width: 100%/4;
            }
        }
    }

    .page-products.page-layout-3columns {
        .products-grid {
            .product-item {
                width: 100%/2;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

    .products-grid {
        .product-item {
            width: 100%/5;
        }
    }

    .page-layout-1column {
        .products-grid {
            .product-item {
                width: 100%/6;
            }
        }
    }

    .page-layout-3columns {
        .products-grid {
            .product-item {
                width: 100%/4;
            }
        }
    }

    .page-products {
        .products-grid {
            .product-items {
                margin: 0;
            }

            .product-item {
                margin-left: calc(~'(100% - 4 * 24.439%) / 3');
                padding: 0;
                width: 24.439%;

                &:nth-child(4n + 1) {
                    margin-left: 0;
                }
            }
        }
    }

    .page-products {
        &.page-layout-1column {
            .products-grid {
                .product-item {
                    margin-left: 0;
                    width: 100%/5;
                }
            }
        }

        &.page-layout-3columns {
            .products-grid {
                .product-item {
                    margin-left: 1%;
                    width: 32.667%;

                    &:nth-child(3n) {
                        margin-left: 1%;
                    }

                    &:nth-child(3n + 1) {
                        margin-left: 0;
                    }
                }
            }
        }
    }
}
0

change the following code app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .products-list .product {
        &-item {
            table-layout: fixed;

            &-photo {
                padding: 0 @indent__s @indent__s 0;
                width: 30%;
            }
        }
    }
}

with this:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .products-list .product {
        &-item {
            table-layout: fixed;

            &-photo {
                padding: 0 @indent__s @indent__s 0;
                width: 30%;
            }
        }
    }
    .product {
        &-items {
            margin-left: auto;
        }
        &-item {
            .products-grid & {
                width: 100%;
                padding-right: 20px;
                text-align: center;
            }
        }
    }
}

You will find this at line number 237 in your file, after changing the file, run setup:upgrade and setup:static-content:deploy

  • if the specified file doesn't exist, search for vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_listings.less and do the same. – Manish Joy Sep 11 '17 at 10:08
  • upvote, if you find it useful – Manish Joy Sep 11 '17 at 10:12
  • Into _listings.less I can not find the classes you wrote to me, my file is as above – Alessandro Sep 11 '17 at 11:03
  • @Alessandro It's there, but I have changed my answer to make more clear. – Manish Joy Sep 11 '17 at 11:43

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.