Grösse des Mengenfeld im Mobilen Warenkorb verringern?

Thema wurde von Anonymous, 21. Oktober 2018 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.684
    Danke erhalten:
    293
    Danke vergeben:
    1.116
    Hallo Leute,

    Das Mengeneingabefeld ist auf dem Smartphone absolut gigantisch. (siehe Bild)

    Ich kann eigentlich zu 422 % ausschliessen, dass bei mir im Shop, jemals mehr als eine zweistellige Anzahl an Artikel bestellt werden. Ich brauche das Feld daher nicht mal halb so groß.

    Auch ein Vorteil wenn das Feld kleiner wäre:
    Dann könnte da sogar noch Platz für die Artikelbilder sein.
    Aktuell werden diese nur angezeigt, wenn ich das Telefon horizontal halte.

    Kann ich die Größe also irgendwie reduzieren?
    Mir reicht es locker bis zum Grünen Strich, weniger sogar noch....(siehe Bild)

    Freundliche Grüsse und noch einen schönen, erholsamen Sonntag :)
     

    Anhänge:

  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.684
    Danke erhalten:
    293
    Danke vergeben:
    1.116
    Niemand eine Idee?
    :(

    Auf dem Desktop ist das Feld wesentlich kleiner - wenn man das Browser Fenster kleiner zieht, wird dieses Feld aber immer größer und erreicht in der Mobilen Variante seine enormen Ausmasse!

    Anbei Screenshot vom Desktop


    Via HTML Lupe ist es im CSS wohl mit
    .form-control, .input-text

    zu steuern...
    Dort steht "width" auf 100%...

    Frage: Wenn ich das nun verringe, wird das Feld tatsächlich kleiner. Bei 40% passt noch genau eine dreistellige Zahl hinein - das würde mir locker langen!

    Aber: Werden noch andere form-control Felder davon betroffen oder bezieht sich diese CSS Angabe nur auf das Anzahl Eingabe Feld? Dann wäre mein Problem damit ja gelöst...
     

    Anhänge:

  3. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das Teil hat 4 Spalten:
    1. Bild = wird Mobile ausgeblendet
    2. Titel und Beschreibung = hat Mobile 50%
    3. Eingabefeld, Aktuallisieren und Löschen = hat Mobile 50%
    4. Preis = rutscht Mobile unter die Eingabe

    Wenn Du jetzt nur das 3 Feld kleiner machst, würde sich der Preis daneben setzten.

    Tipp:
    In Chrome oder FireFox gibt es die Funktion "Untersuchen" oder "Element Untersuchen",
    Damit kann man die Bereiche und die Codes finden und das gefahrlos testen.
    Wenn es passt braucht man das nur noch in den SE zu übertragen
     
  4. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.684
    Danke erhalten:
    293
    Danke vergeben:
    1.116
    Mist, geht leider doch nicht. In der Mobilen Version sind alle Eingabefelder dann davon betroffen :(
     
  5. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Falscher Code?
    Code:
    @media (max-width: 480px){
    .order-wishlist table tr > td.qty {
        width: ...%;
    }}