gelöst Kategoriebilder 'responsive', wenn 'Bild der Unterkategorie anzeigen' aktiviert?

Hallo zusammen
Ich hoffe, ich bin nicht der einzige mit diesem Thema und evtl. exisitert bereits eine Lösung.
Einstellungen bei mir sind: Desktop 4 Kategorien nebeneinander, Tablet 3, Smartphone 2.
Ich hatte mich daran gemacht die Kategoriebilder vorzubereiten und derart zu präsentieren, dass 'Bild der Unterkategorie anzeigen' in der jeweiligen Kategorie aktiviert werden kann.

Für Desktop hatte ich über den Browser die Grösse 227x200px erkannt - und folglich ein Dutzend Bilder vorbereitet & aktiviert...

Leider habe ich nicht geahnt, dass diese Bilder nicht ideal skaliert auf anderen Bildschirmgrössen dargestellt werden.
Das heisst aktuell: Tablet: Höhe passt nicht, Smartphone: Breite passt nicht. Auch die Experimente mit grösseren Bildern, oder anderen Formaten gingen schief, weil das System diese einfach nur in die vorgegebenen Rahmen reinquetscht, statt (was toll wäre) wie im StyleEditor (Sektion/Spalte), was dort eine gefällige responsive Darstellung der Bilder ermöglicht.

Der Status: Desktop prima, Tablet & Smartphone nicht.

Gambio Support meint, es ginge nur über CSS (was nicht mein Spezialgebiet ist).

Hatte jemand damit schon zu kämpfen und eventuell eine Lösung gefunden, an der ich freundlicherweise teilhaben könnte?

Vielen Dank im Voraus & Grüsse


Malibu Theme, Gambio 4.4.0.2, selbst gehostet

 

Man kann ein bisschen tricksen und z-B- den Rahmen um die Bilder weg machen.
Dann fällt es nicht so auf, dass die Bilder nicht exakt sind
Für alles andere kommt es aber immer auf die Einstellungen und die Bildgröße / Format an. Da müsste man den Shop sehen.

 

Hallo Barbara. Danke für die Antwort. Hier ist die Kategorie, mit der ich angefangen habe: (Link nur für registrierte Nutzer sichtbar.)
Der Rahmen ist im Prinzip ok. Ohne Rahmen sieht es für meine Augen noch weniger überzeugend aus (auf kleineren Bildschirmen). Hast Du eine Idee für Tablet- & Smartphonedarstellung?

 

Mit

Code:

.subcategories-listing-container .subcategories-listing .subcategory-item .cat-image-container {
    height: auto !important;
]

und

Code:

.subcategories-listing-container .subcategories-listing .subcategory-item .cat-image {
    max-height: 200px;
}

gegebenenfalls auch mit einem !important
müsste das verbessern.

 

Hallo Barbara, wirklich sehr cool. Danke, danke, danke. Es gibt aber eine unerklärliche Nebenwirkung (nur auf Desktop, jedoch nicht auf d. Tablet & Smartphone). Die Kategorien werden in Zeile drei 'auseinander gerissen' (siehe Printscreen). Lässt sich das fixen?
Auch wenn es Wiederholung ist: Auf d. Tablet & Smartphone gibt es diesen Fehler nicht.

 

Konntest Du das beheben? bei mir ist der Fehler nicht...

 

Hallo Barbara. Beheben konnte ich das gestern nicht. Du konntest es nicht sehen, weil das Ladezeitmodul von Dominik vorgeschaltet ist, da ist Zeitverzug von 1 Std dabei. Für Admin ist es nicht, daher habe ich Änderungen stets live. Ich habe allerdings die CSS wieder gelöscht. Werde mich im Januar damit beschäftigen, jetzt ist erstmal etwas Ruhe angesagt.
Ich schreibe sicher hier noch etwas dazu.

 

Hallo zusammen
Vielen, vielen Dank für die tolle Unterstützung an @barbara , @Dominik Späte und auch @Armin (Gambio) ... wobei Dominik hier die Nase vorn hatte (muss ich in der Tat so sagen).

Vielleicht ist es hilfreich für jemanden. Das ist die Lösung für meinen Problemfall:

/* Kategoriebilder Unterkategorie in Kategorie responsive mit Korrektur 'Versatz' */

@media (max-width:1024px){
.subcategories-listing-container .subcategories-listing .subcategory-item .cat-image-container {
height: auto !important;
}
.subcategories-listing-container .subcategories-listing .subcategory-item
.cat-image {
max-height: 200px;
}
}
@media (max-width:767px){
.subcategories-listing-container .subcategory-item:nth-child(odd){
clear:left;
}
}


Ein tolles, sympathisches neues Jahr wünsche ich natürlich auch!

Grüsse
Peter