Produkt Bilder/Text Ansicht -> Listenansicht

Thema wurde von Anonymous, 10. Oktober 2017 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Hallo
    brauche wieder etwas Hilfe :))

    Ich möchte gerne meine Produktbilder in der kachelansicht ändern. was ich auch getan habe.
    Im Firebug habe ich die Schrift nach rechts verschoben was auch gut aussieht..
    wie hier...
    [​IMG]

    wenn ich dann den css code in den editor kopiere sieht es so aus:

    [​IMG]

    Und wenn ich dann noch in die Kachelansicht wechsle, sieht es so aus.

    [​IMG]

    Kann man das beheben? Wenn wie?
    Herzlichen Dank und lg Steffi
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Du hast die Bilder generell breiter gemacht, ohne den Rest anzupassen.
    Um Dir das helfen zu können braucht man einen Link zur Baustelle, damit man sich das css der einzelnen Bereiche genau ansehen kann
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Hallo Barbara
    der Shop ist jetzt online untern fiebmatz.de

    Hilft das?

    Herzlichen Dank und lg Steffi
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ich schau mal.
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Bevor der (Test-)Shop online geht.

    1. In das Gratis Impressum würde ich mal den ODR Link reinschreiben.
    2. §36 VSBG sollte ggf. auch mal gelesen werden.
    3. Ich würde mich auch belesen, unter welchen Bedingungen Zahlartengebühren auf den Kunden umgelegt werden dürfen ... ohne sich der Gefahr einer Abmahnung auszusetzen.
    4. Man sollte sich einig sein, ob nun ab 100 EUR oder ab 120 EUR versandkostenfrei geliefert wird.
     
  6. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Hallo
    ja das ist jetzt alles erstmal nur grob gemacht, das wird alles noch vernüftig gemacht.
    erstmal Design und dann alles weitere :)
     
  7. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Zunächst mal:
    wenn Du die Höhe mit 95% und die Breite mit 200% festlegst, verzerrst Du die Bilder.
    Stelle das wieder zurück auf max-Werte von je 100%
    Um die Bilder breiter zu machen:
    Code:
    @media (min-width: 1200px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
        width: 33.333%;
    }}
    @media (min-width: 992px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
        width: 33.333%;
    }}
    .inside .content-container .content-container-inner .image .product-image img {
       left: 10%;
    
    Dann muss natürlich der Text schmaler:
    Code:
    @media (min-width: 1200px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
        width: 33.333%;
    }}
    @media (min-width: 992px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
        width: 33.333%;
    }}
    Damit sollte es in der Liste so aussehen:
    Unbenannt.JPG

    Dann sind die Kacheln auch wieder richtig.
     
  8. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Muss das @media mit rein kopiert werden?
     
  9. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    ja
     
  10. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Funktioniert nicht.
    Das hab ich jetzt..

    .product-container .inside .content-container .content-container-inner .image .product-image img {
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transform: translateX(-10%) translateY(-50%);
    }
    .product-container .inside .content-container .content-container-inner .image .product-image img {
    height: 100%;
    width: 100%;
    }

    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
    display: table-cell;
    float: right;
    height: 100%;
    vertical-align: top;
    }

    @media (min-width: 1200px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
    width: 33.333%;
    }}
    @media (min-width: 992px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
    width: 33.333%;
    }}
    .inside .content-container .content-container-inner .image .product-image img {
    left: 10%;

    @media (min-width: 1200px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
    width: 33.333%;
    }}
    @media (min-width: 992px){
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
    width: 33.333%;
    }}
     
  11. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Nimm mal das alte, das Du eingetragen hattest, raus bitte
     
  12. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    hinter 10% fehlt eine Klammer.

    Nur die Schrift ist jetzt noch auf den Bildern...
     
  13. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Achja jetzt klappts..jetzt siehts super aus!
     
  14. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    24. August 2017
    Beiträge:
    60
    Danke erhalten:
    1
    Danke vergeben:
    2
    Danke nochmal :)
     
  15. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    stimmt, sorry.