Layoutanpassung im Warenkorb

Einen schönen guten Abend.
Shop-Version 6.2.3 CE, Flow-Template, Bonuspunkte-Modul von Aggrosoft
Im Warenkorb sieht das so aus:


Der dazugehörige Code aus dem Chrome-Inspektor sieht für die Punkte so aus:

Und für die Gutscheine so:

Was muss ich wie anpassen, damit der Punkte-Block so aussieht wie der Gutschein-Block, also der Text “Punkte einlösen” steht direkt neben dem Eingabefeld und die beiden Blöcke - Punkte und Gutscheine - sind gleich groß.

Es funktioniert alles, es geht rein um die Optik. Und meine Chefin möchte das halt gleich aussehend haben.

Vielen Dank schon mal und noch einen schönen Abend

Matthias

Schönen guten Abend Matthias,

die Flow Theme Versionsnummer wäre noch interessant. Gehe mal von Version 3.6.0 flow_theme/styles.min.css at v3.6.0 · OXID-eSales/flow_theme · GitHub aus und dann wäre es Bootstrap Version 3.3 als Dokumentation Bootstrap · The world's most popular mobile-first and responsive front-end framework.

Dort guck Dir am Besten die Bootstrap Dokumentation für Deine verwendete Bootstrap Version an. Ein Grundverständnis vom dortigen Grid System CSS · Bootstrap wären die Basics.

Die beiden Code Stellen Punkte und Gutscheine lassen sich schwer angleichen, weil Gutscheine mit der CSS Klasse “pull-left” arbeitet. Heißt dort wird in der Darstellung getrickst und Punkte Darstellung arbeitet mit Grid System und man sieht über die CSS Klasse “col-6” das dort mit dem Grid System gearbeitet wird.

Um das zu vereinheitlichen wären wahrscheinlich umfangreiche HTML Struktur Änderungen notwendig.

Was Du allerdings probieren könntest wäre beim

<input placeholder="Punkte hinzufügen" type="text" size="20" ...

Die size Angabe HTML input size Attribute zu verkleinern, so könntest zumindest im besten Fall den Umbruch von Button in nächste Zeile vermeiden.

Z.B. halbieren indem size=“10” statt size=“20”

Viele Grüße,
Tim

Hallo Matthias,
versuche mal das Template nach diesem Vorbild CSS · Bootstrap zugestalten!
Tmp Ordner nicht vergessen zu leeren!