Testshop 3 Mobile Ansicht

Thema wurde von bernhardanzberger, 30. September 2018 erstellt.

  1. bernhardanzberger
    bernhardanzberger Neues Mitglied
    Registriert seit:
    4. Mai 2014
    Beiträge:
    3
    Danke erhalten:
    0
    Hallo zusammen.

    ich bin dabei mir den Testshop 3 einzurichten.
    ein Problem welches ich hier noch nicht lösen konnte war die Artikelliste in der Mobilen Ansicht.
    Hier zeigt er pro Zeile nur einen Artikel an, obwohl im Styleedit zwei eingestellt sind.
    Wenn ich dort 3 einstelle, zeigt er mir nur 2... und leider auch ein wenig seitlich versetzt.

    Das selbe Problem gab es auch in der Tablet Ansicht. Hier waren die Gridspalten falsch angegeben und so konnte das gelöst werden. Für die Mobile Anischt gibt es aber nicht die selbe Einstellmöglichkeit im Styleedit.

    hat jemand eine Idee wo ich da etwas ändern muss.

    vielen Dank schon mal
    lg Bernhard
    www.abgedreht.at Mobile Ansicht.png
     
  2. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    Grad steht das bei dir offensichtlicht auf 3 pro Zeile. Jeder Artikelcontainer kriegt dann eine Breite von 33,33%, so passen 3 in eine Zeile. Da aber auch noch Abstände zwischen den Container gesetzt sind (links 15 pixel und rechts 15 pixel) die sich addieren, wird die Spalte 100% + 3 * (2*15px) breit. Das werden so ungefähr 110-120% sein. Du musst also die Abstände rausnehmen oder die Breiten kleiner als 33,33% setzen, damit du die Überbreite abbaust.
     
  3. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    Schnell zusammengetüdelt und nicht getestet, aber das hier müsste zum Beispiel bei Verzicht auf die Abstände funktionieren:

    Code:
    @media screen and (max-width:767px) {
        .product-container {
            margin: 0 15px 0px 15px;
        }
    }
     
  4. bernhardanzberger
    bernhardanzberger Neues Mitglied
    Registriert seit:
    4. Mai 2014
    Beiträge:
    3
    Danke erhalten:
    0
    Hallo Wilken,

    das könnte helfen, jedoch schaffe ich es nicht den Code zu aktivieren.
    Habe ihn mittles Eigene css hinzufügen eingebaut. Im Screenshot sieht man das er irgendwo schon den Befehl für
    margin 0 15px 30px 15px hat. Ich würde hier lieber 0px 0px 0px 0px haben. da es dann wie am 2. Screenshot funktioniert. es würde auch gehen width auf 40% zu ändern. aber möchte nur ungern die Bilder am Handy kleiner machen.
    Hab zwar ein paar absolute Grundkenntnisse, aber auskennen ist was anderes...


    upload_2018-10-1_22-45-35.png
    upload_2018-10-1_22-50-7.png
     
  5. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Wenn mal etwas nicht geht, weil es darunter gesetzt wird, dann mach ein !important dahinter.

    margin: 0 15px 0px 15px !important;
     
  6. bernhardanzberger
    bernhardanzberger Neues Mitglied
    Registriert seit:
    4. Mai 2014
    Beiträge:
    3
    Danke erhalten:
    0
    Vielen Vielen Dank...
    Langsam aber doch wirds...