Mobile Ansicht im eigenen Theme anpasssen

Shopware 5 Themes & Design
1

Hallo, habe derzeit ein Problem in der Mobilen Ansicht. Die Kategorie Ansicht auf dem Tablet ist es derzeit alles andere als schön. Hier stauchen sich die Artikel zusammen. Hier hätte ich gerne 2-3 Artikel nebeneinander und auf dem Handy 2 Artikel. Ich habe im eigenen Theme u.a. folgende poduct-box.less:

@media screen and (min-width: 68em) {
    /* PRODUCT BOX - FULL CONTAINER - less width to show more in 1 line */
    .box--image {
        width: 25%;
    }
}

    .product--image {
        .unitize-margin(0, 0, 0, 0);
        width: auto;
		height: 100%;
        position: relative;

        }

.box--content {
        .unitize-padding(0, 0);
        height: 100%;
        border: 1px solid @border-color;
        position: relative;
    }


    .product--image {
        .unitize-height(180);
        .unitize-margin(0, 0, 5, 0);
        display: block;
        text-align: center;

        .image--element {
            height: 100%;
            width: 100%;
            display: block;
            margin: 0 auto;
            position: relative;
            img {
                position: absolute;
                top: 0; bottom: 0;
                left: 0; right: 0;
                margin: auto;
                display: inline-block;
                vertical-align: middle;
                z-index: @zindex-product-box-image-element;
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				height: 100%;
				
            }
        }
    }
    .product--title {
padding: 2px 10px 0 15px;
    }
    .product--rating-container {
padding: 2px 10px 0 15px;

    }
    .product--price-info {
		padding: 2px 10px 0 15px;

    }
    .product--actions {
				padding: 2px 10px 15px 15px;

    }

Hat jemand einen Tipp was ich hier anpassen muss dafür?

2

Die Klasse .box–image für die verschiendenen Viewports anpassen. 

50% = 2 Spalten

33% = 3 Spalten

Hier steht wie man mit Themes / LESS arbeitet: Frontend Guides

1 „Gefällt mir“