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

Thema wurde von Anonymous, 22. Dezember 2021 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Januar 2021
    Beiträge:
    403
    Danke erhalten:
    138
    Danke vergeben:
    54
    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
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Januar 2021
    Beiträge:
    403
    Danke erhalten:
    138
    Danke vergeben:
    54
    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?
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Januar 2021
    Beiträge:
    403
    Danke erhalten:
    138
    Danke vergeben:
    54
    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.
     

    Anhänge:

  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Konntest Du das beheben? bei mir ist der Fehler nicht...
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Januar 2021
    Beiträge:
    403
    Danke erhalten:
    138
    Danke vergeben:
    54
    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.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Januar 2021
    Beiträge:
    403
    Danke erhalten:
    138
    Danke vergeben:
    54
    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