Probleme mit Kürzlich angesehenes Produkt Thumbnail. Ist etwas nicht in Ordnung mit meinem CSS-Code oder einem Code, den ich verwenden kann?

Question

Unsere kürzlich angesehenen Produkte werden über Landschaft positioniert und das Produktfoto ist verzogen. Sowie die Produktkategorie auf der linken Seite? Würde es wirklich gerne zusammenreihen. Ist mit dem CSS-Code etwas nicht in Ordnung? Danke für die Hilfe!

Hier ist die Website-Link: http://aom.sg/product-category/air/

Photo

Answer 1

Eigentlich sind Ihre Produkte in 5 Spalten gesetzt. Um sich in der Reihe anzuzeigen, müssen Sie einige Änderungen in CSS machen:

Zum Beispiel in großen Bildschirmen die CSS in Ihrem Thema styles.css Datei hinzufügen, für Produktkategorie Archivseiten, werden sein:

.woocommerce.tax-product_cat ul.products li.product, 
.woocommerce-page.tax-product_cat ul.products li.product { 
    width: 19% !important; 
    margin-right: 1% !important; 
} 

@media only screen and (max-width: 768px) { 
    .woocommerce.tax-product_cat ul.products li.product, 
    .woocommerce-page.tax-product_cat ul.products li.product, 
    .woocommerce-page.tax-product_cat[class*=columns-] ul.products li.product, 
    .woocommerce.tax-product_cat[class*=columns-] ul.products li.product { 
     width: 46% !important; 
     margin-right: 4% !important; 
     margin-left: 0 !important; 
    } 
} 

Dies sollte funktionieren.

Für andere Bildschirmgeräte, sollten Sie die richtigen zwingenden CCS Regeln herausfinden müssen, Ihren Browser Code Inspektoren ...