2017-07-25 4 views
1

Ich versuche dieses Problem für Tag zu lösen und ich fand Lösung, aber es ist nicht so, wie ich es mir vorstelle und was ich gerne hätte, also greife ich nach größeren und klügeren Köpfen :)Joomla Virtuemart Kategorie Mobiles Layout

ich habe Web-Shop, der, wie hier auf mobiles Layout ein Produkt pro Zeile zeigt:

enter image description here

aber ich möchte es zwei in einer Reihe sehen. Nun, das ist das Problem: In der Konfiguration von Virtuemart wird die Anzahl der Produkte pro Zeile auf 3 gesetzt, da ich pro Computer und Desktop-Geräten (auch Laptops und größere Tablets) 3 Produkte pro Zeile sehen möchte funktioniert gut.

Aber auf mobilen Geräten in Vorlage, mobile.css dies immer 1 in einem row.So zu zeigen gesetzt Ich suchte und fand ich Code

.category-view .vm-col-3 

, die width: 100%

Wenn ich gesetzt fügen Sie diese zu 50% bekomme ich diese:

enter image description here

ich einfügen clear: none und float: left nothin g ist passiert. Also finde ich heraus, dass ich einen .row-Code finden muss, weil ich sehe, dass es 3 Produkte hintereinander ist, wie es in der Konfiguration eingestellt ist, nur jetzt ist es kleiner und sortiert, aber immer noch nicht so, wie ich es möchte haben.

Dann fand ich Zeile, die die Zeile setzt:

.category-view .browse-view .row 

und eingefügt diese Zeile:

clear: none; 
float: left; 
width: 50%; 

Damit sind die Ergebnisse der am nächsten, aber immer noch nicht, was ich brauche. Immer wenn es 9 Produkte beendet, sind die nächsten 3 untereinander (3 Produkte) und dann wieder mit zwei hintereinander und wiederholt sich nach 9 Produkten.

Sie können es sehen hier (mit Handy): box2.appleoprema.com/index.php/iphone6-maskice-i-zastita

jemand kann mir sagen, bitte, wie dieses Problem beheben? Ich habe viele Wege und Codes versucht, um das herauszufinden, und nach 3 Tagen weiß ich nicht mehr, was ich tun soll. Vielen Dank im Voraus für Hilfe.

Antwort

0

Hallo dort nach, einen Blick scheint es, dass die Struktur des Behälters wie dieses ist

Reihe col-1 col-2 col-3 Reihe etc ...

so Hinzufügen von width: 50%; zu der Zeile vermasselt alles, weil jeder Zeile 3 Produkte zugeordnet sind.

Was können Sie tun, ist entweder width: 33%-.product.vm-col.vm-col-3 für media="(max-width: 640px)" pro Zeile 3 Produkte anzuzeigen oder zu verlassen es, wie es so ist, dass die Säule 100% der Breite wird angezeigt 1 Produkt pro Zeile.

Wenn Sie 2 Produkte pro Zeile für mobile Anzeige haben möchten, sollten Sie entweder im Backend nachsehen, ob es eine solche Option gibt oder den HTML-Code der von Ihnen verwendeten Komponente/Modul ändern.

+0

Danke für Ihre Antwort. Es gibt eine Option für 2 Produkte hintereinander im Backend, aber auf dem Desktop werden auch 2 Zeilen angezeigt. Ich brauche 3 Zeilen auf dem Desktop und 2 Zeilen auf dem Handy. Ich dachte, dass ich vielleicht etwas tun (bearbeiten) Kategorie Produkte PHP-Datei. Wenn ich 1 Produkt belasse, wird es schwierig zu scrollen, wenn ich 120 oder 150 Produkte habe. Ich denke, nur Lösung ist 3 in einer Reihe:/ –

+0

Die einzige Möglichkeit, die Sie erreichen können, ist durch Bearbeiten der PHP-Datei der Komponente, um die Optionen aus dem Back-End zu überschreiben. Dies kann erfolgen, indem Sie die Spalten nicht in Zeilen setzen und die Bootstrap-Klasse für jede Spalte wie col-sm-6 col-md-4 definieren. –

Verwandte Themen