Produktbild Größe ändern

Thema wurde von Anonymous, 23. September 2021 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    Hallo,

    Wie kann ich das Produktbild in der MOBILEN "Übersicht" ändern? Ich kann machen was ich will, es wird nicht größer Dargestellt?

    Gruß
    Thomas Unbenannt.jpg
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Im Style Editor unter Bereiche -> Produkte -> Produktliste
    die
    "Höhe des Produktbildes Kachel mobil"
    hast Du schon erhöht?
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    Ja Barbara , das habe ich. Aber ich glaube ich habe den "Fehler" gefunden.

    Gambio hatte mir letztens nen CSS Code eingetragen damit meine Desktop Ansicht einheitlich ist, das wirkt sich nun auch auf die mobile Ansicht aus. kann man da noch was ändern?

    Code:
    .productlist-viewmode-list .product-container .product-tile figure img {
    height: 140px !important;
    width: 140px !important;
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    ja, versuche es mal mit

    Code:
    @media (min-width: 768px){
    .productlist-viewmode-list .product-container .product-tile figure img {
    height: 140px !important;
    width: 140px !important;
    }
    }
    das müsste der Code erst ab 768 px Bildschirmbreite greifen.

    Du weißt aber schon, dass der Code die Bilder verzerrt, wenn die eher im hoch- oder querformat im Shop sind?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523

    Ja danke Barbara , das weiß ich und habe die paar die verzerrt waren angepasst. Danke für den Code, ich probiere ihn morgen gleich aus und gebe hier bescheid.

    Lg
    Thomas
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    So ich habe deinen Code nun übernommen, aber es ändert nix. Ich habe die mobilen px hochgenommen und alle caches geleert , aber es ändert sich nix.
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ok, ich habe mich etwas missverständlich ausgedrückt :oops:

    Ändere den Code
    Code:
    .productlist-viewmode-list .product-container .product-tile figure img {
    height: 140px !important;
    width: 140px !important;
    }
    in
    Code:
    @media (min-width: 768px){
    .productlist-viewmode-list .product-container .product-tile figure img {
    height: 140px !important;
    width: 140px !important;
    }
    }
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    @Barabara

    Danke für deine Antwort.

    Das habe ich nun gemacht Barbara , ABER es ändert sich nix, die Bilder bleiben Mobil klein.

    Gruß
    Thomas
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hast Du einen Link zur Seite?
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hast du die Bildgröße für die Kacheln Mobil auf 130px gestellt?
    Wenn ja, erhöhe das mal auf 250px
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    So sieht es dort gerade aus. Habe es von 200 auf 250px gestellt, leider ändert sich da auch nichts.
     

    Anhänge:

  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Der Shop nimmt offenbar für die Listenansicht nur das, was in der eigentlichen Kachelansicht eingestellt ist.

    Versuche es mal mit dem Code im eignen CSS:
    Code:
    @media (max-width: 767px)
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image {
        height: 250px;
    }}
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    Uh ha , damit habe ich mir den Style irgendwie komplett zerschossen, der Code haut irgendwie nicht hin. Die Startseite und das Layout war zerklüftet und die Artikelbilder mobil, waren noch nicht größer. mh? Ich werde mal Gambio fragen.
     
  14. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Sorry, da fehlte eine Klammer in der Media-Zeile
    Code:
    @media (max-width: 767px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image {
        height: 250px;
    }}
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    Das hat geklappt.

    Danke.......
     
  16. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    Aber eine Frage habe ich noch, hebt das den Code der vorher drin war auf? Den habe ich gelöscht und durch deinen ersetzt.
     
  17. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Nein, das hier ist nur für Mobil, das andere war für alle anderen Bildschirmgrößen.
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    ah super, also lasse ich den alten Code drin und ergänze dann deinen.......

    Danke
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    428
    Danke erhalten:
    144
    Danke vergeben:
    523
    gerade mal probiert, beide Codes zusammen geht nicht, der eine der vorher drin war, hebt deinen auf.
     
  20. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    hast du das jetzt so geschrieben?
    Code:
    @media (max-width: 767px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image {
        height: 250px;
    }}
    @media (min-width: 768px){
    .productlist-viewmode-list .product-container .product-tile figure img {
    height: 140px !important;
    width: 140px !important;
    }
    }