Position Batterie Icon, Leistungsbox

[3joern]

Ahoi Zusammen,
nur eine kleine optische Anmerkung. Als Interfacedesigner triggert mich das hart, dass das Batterie Icon direkt am Logo klebt und das die Leistungsbox direkt an der oberen Box dran hängt. Hab das kurz im Firefox-Developer per CSS korrigiert, solltet Ihr das einsetzen, wäre das sehr schön ;)

.align-text-center {
margin-left: 10px;
margin-right: 10px;
}

div.container-fluid:nth-child(2) > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
margin-top: 15px;
}

davor

mit angepasstem CSS

[3joern]

Moin, könnt Ihr mit dem CSS nichts anfangen oder bin ich zu anspruchsvoll ;)

[schlimmchen]

Zu anspruchsvoll finde ich das nicht, mich stört das auch.

Mit deinem CSS kann man leider in der Tat wenig anfangen.

.align-text-center ist eine generierte Klasse von bootstrap, in die man zum einen nur schwer eingreifen kann (man müsste das Bootstrap SCSS anpassen) und die zum anderen auch beliebig viele andere Objekte betreffen kann (alle, die diese Klasse nutzen).

Zu div.container-fluid:nth-child(2) > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1): Wenn sich irgendwo in einer Ebene dieser "Kette" das DOM ändert, und das kann leicht passieren, dann geht das sofort kaputt. Außerdem sehe ich nicht, was hier das Target ist und warum das funktioniert. Und ob das für eine dritte Zeile an Karten funktioniert wage ich auch zu bezweifeln.

Hinzu kommt jeweils, dass absolute Angaben in Pixel normalerweise nicht die richtige Wahl sind.

Die richtige Lösung für das erste Problem (das Icon) ist eine Attributierung des entsprechenden <span> im Vue-Quellcode.

Die richtige Lösung für das letztere Problem ist es, alle Karten (genauer alle "col"s) in eine "row" zu packen. Bootstrap übernimmt das Umbrechen nach jeder dritten Karte dann von selbst und dann gilt auch wie erwartet der Abstand des Gutters zwischen den "Zeilen", statt nur zwischen den Spalten.

Siehe 95e560b.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns.