Mit Entsetzten sehe ich gerade, dass alle Produktbilder meines Shops im Handy (Iphone IOS 16.3.1) völlig gestaucht dargestellt werden. Dieser Fehler taucht ausschließlich auf den Produktübersichts-Seiten auf. Alle andere Bilder, wie z.B. auf den Produktdetail-Seite werden korrekt dargestellt. Auch auf PC-Desktop und iPad ist alles OK. Hat jemand eine Idee?
Tipp 1: deaktiviere auf der Startseite die alten Produktempfehlungen (Topartikel) und falls Du nutzt auch Sonderangebote, neue Artikel und Ankündigungen und erstelle dafür im StyleEditor Widgets Damit sind die 4 schmalen Kacheln mit den Mini-Bildern auf der Startseite weg und durch 1 - 2 (je nach Einstellung) Kacheln ersetzt zu Deinem Problem: Auf meinem Android-Handy sehen die Bilder gut aus (habe sie mit der PC-Ansicht verglichen) Liegt also entweder am IPhone (Browser) oder an einer Einstellung bei Dir Im css steht Code: .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image img { max-width: 100%; max-height: 100%; } könnte das falsch gelesen werden, dass das Bild so verzerrt wird? Auf Deinem Bild sieht es nicht nur gestaucht, sonder auch zu breit aus.... Wenn ich in der Konsole am PC das "max-" weg nehme, habe ich das selbe Ergebnis wie auf Deinen Bildern. Wenn Deine Bilder alle höher als breit sind, könnte das im eigenen css vielleicht helfen: Code: @media (max-width: 767px){ .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image img { width: auto; max-height: 100%; }}
Im IOS auf Safari und Chrome gleiche Darstellung. (Nur iPhone, nicht im iPad) Es ist nur auf dieser Ebene. (Produktübersichtsseiten) Alle anderen Ebenen werde korrekt dargestellt.
@klaus_wengel füge bitte folgendes CSS einmal im StyleEdit ein: Code: .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image img { max-height: 130px; }
Moin. Im Cloud-Shop kannst du auch CSS eingeben. Wenn du den Style Edit aufrufst einfach auf die 3 Punkte neben dem Haus klicken und "SCSS/CSS bearbeiten" auswählen. Dort kannst du dann den entsprechenden Code von oben eingeben.
@Lilly's Weinshop da ich es noch nie gemacht habe habe ich etwas Angst das ich etwas falsch mache. Einfach den Code in das Feld so eingeben ? .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image img { max-height: 130px; }
@michaela_heinrichs Ich kenne das Problem sich da an was neues ran zu wagen Ja, einfach den Code dort als letztes Einfügen, dann funktioniert das.
@Lilly's Weinshop danke erstmal für die Antw ort. Nur ich kann es nicht als letztes einfügen. Es kommt nur das hier und ich weiß nicht wo er es hinschreibt
@michaela_heinrichs Einfach in der ersten Zeile einfügen. Das wird automatisch wenn du den Code kopierst alles richtig mit Zeilentrennung eingegeben.