Möglichkeit 2 Artikel nebeneinander bei Mobile Listing Ansicht?

Wie schon im Titel gesagt… gibt es einen Möglichkeit durch Templateanpassung dass in der Mobile Ansicht beim Listing die Artikel in 2 SPALTEN angezeigt werden wie bei anderen Onlineshops?

Wenn man viele Artikel hat ist dies wesentlich übersichtlicher.
Also Kategorie auswählen und dann werden die Artikel in 2 SPALTEN angezeigt und NICHT in einer

Für die Dektop Anzeige ist es ja leicht möglich in dem man den Wert hier ändert.

5-spaltig: box–image { width: 20%; }
4-spaltig: box–image { width: 25%; }
3-spaltig: box–image { width: 33.3%; }
2-spaltig: box–image { width: 50%; }

für Mobile auch?

 

Klar ist das möglich …

nimm dir Google chrome zur Hand und spiele da an den css werten rum, notiere dir diese und pack das in dein Theme oder Plugin.

ich habe auch unser mobiles listing geändert, da im Standard viel zu viel Mist auf einmal sichtbar ist und der Fokus nicht auf dem finden liegt … Paulgurkesshop.de

habe mich am eBay listing orientiert.

habs geschafft

Mobile Listing ist nun 2spaltig

Siehe
https://www.simsis-circus.com/women/

Änderung in product-box.less

Zuvor:

.box–image {
    .image–top(200);
    }

Nun

.box–image {
    .image–top(200);
        width: 50%;
    }

 

Jetzt wo ich es wieder sehe… Das war auch erst mein Ansatz! jedoch fande ich die ebay Variante auch nicht schlecht, war zwar etwas komplizierter aber jeder wie er mag…

Freut mich, dass ich etwas helfen konnte!

Hi, 

Ich habe auf meiner Seite die 4 Spalten auf 3 Spalten veringert und auf Computer View funktioniert es auch aber in Mobiler Ansicht kommt immer eine Spalte. Habe den oben genannten Code zu meinem hinzugefügt und zwar waren es in der Mobiler Ansicht danach 2 Spalten aber auch in Computer view. Eine Idee was Ich am Code ändern muss so das 3 Spalten in Computer view zu sehen sind und 2 Spalten in mobiler view? Nachfolgend mein code für 3 Spalten. Danke

 

@media screen and (min-width: 68em) {
    /* PRODUCT BOX - FULL CONTAINER - less width to show more in 1 line */
    .box–image {
        width: 33.33%;
    }
     
    /* PRODUCT BOX - IMAGE HEIGHT, make smaller for widescreen pictures */
    .box–image .product–image {
        height: 350px;
    }
}