Wie können die Abstände in der Artikel-Listen Übersicht verändert werden?

Thema wurde von MrFab16.4, 13. Oktober 2019 erstellt.

  1. ReneT

    ReneT Erfahrener Benutzer

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    Ich habe jetzt einfach mal in der Konsole den Wert von 50% auf 70% geändert und den Button von 75% auf 100% angepasst.

    Mit dem Ergebnis...

    upload_2019-10-14_11-35-19.png
     
  2. ReneT

    ReneT Erfahrener Benutzer

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    wenn es richtig sein soll schon, aber zu testen kann man auch einfach mal den Wert von der Textbox auf 70 % erhöhen, die rechte Preisbox nimmt sich dann das was über bleibt
     
  3. MrFab16.4

    MrFab16.4 Erfahrener Benutzer

    Registriert seit:
    22. April 2015
    Beiträge:
    397
    Danke erhalten:
    39
    Danke vergeben:
    83
    Die 100% sind m.E. nicht zwingend, da es glaube so ist, dass die vorhandenen Werte vom Browser von Links NACH Rechts "abgearbeitet" werden......also zuerst die 16,66667% dann die 50%...der dritte Wert ist dann m.E. AUTOMATISCH der REST zu 100%...

    Aber stimmt, mathematisch müsste es richtigerweise statt 14,33333% heißen: 13,33333%
    Habe das gerade mal entsprechend geändert...hat aber (fast wie erwartet) keine Änderung/Lösung herbeigeführt...
     
  4. MrFab16.4

    MrFab16.4 Erfahrener Benutzer

    Registriert seit:
    22. April 2015
    Beiträge:
    397
    Danke erhalten:
    39
    Danke vergeben:
    83
    Ja, so soll es aussehen..!


    Sprechen wir (immer) noch von den obigen 11 Zeilen Code...?
    Oder müssen da evtl. noch mehr/zusätzliche Code-Zeilen definiert werden?

    Verstehe ich dich denn richtig?
    Du hast nur die u.g. 50% auf 70% geändert und die u.g. 33.33333% auf 100% geändert?
    Wenn ja, funktioniert das bei mir nicht...

    Code:
    @media (min-width: 1200px) {
        .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
            width: 16.66667%;
        }
        .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
            width: 50%;
        }
        .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .price-tax {
            width: 33.33333%;
        }
    }
     
  5. ReneT

    ReneT Erfahrener Benutzer

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    Ich habe in der Browser Konsole (Google Chrome) den mittleren Wert von 50% auf 70% geändert und über die Browser Konsole den Button von 75% auf 100% geändert damit die Wörter auch komplett lesbar sind...

    In einer meiner Spielwiesen habe ich gestern Abend mal den Code laut des o.g. Beispiels geändert und da hat es genau das getan was es tun soll. Den Butten hatte ich allerdings zuvor schon auf 100% angepasst, weil es mir besser gefällt.

    Ist dir der Begriff "Browser Konsole" und deren Funktionsumfang bekannt?
     
  6. MrFab16.4

    MrFab16.4 Erfahrener Benutzer

    Registriert seit:
    22. April 2015
    Beiträge:
    397
    Danke erhalten:
    39
    Danke vergeben:
    83
    #26 MrFab16.4, 14. Oktober 2019
    Zuletzt bearbeitet: 14. Oktober 2019
    Nur ein wenig...

    Nach etwas rumsuchen bin ich dann auf den folgenden Abschnitt gestoßen...

    [​IMG]


    Und wenn ich dann von der obigen Spalte aus auf das rechte Spalte rechts davon gehe...kann ich (in der Tat) mit den Spaltenwerten experimentieren...

    Wenn ich dann für .title-description einen Wert von ca. 85% eingebe...dann werden auf die Texte nicht mehr umgebrochen, sondern diese sind nun (wie gewünscht) in einer Zeile...siehe die grünen Markierungen...

    [​IMG]


    Doch nun den obigen CSS-Code für den StyleEdit entsprechend von 50% auf 85% anzuändern:
    .productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
    width: 85%;

    bringt in der Praxis/Realität leider keine Veränderung...

    Also irgendwie muss der obige CSS-Code für den StyleEdit noch geändert werden...
     

    Anhänge: