Wir beginnen damit, mit unserem Blog-Post-Modul zu spielen und mit dem Abstand herumzuspielen. Wir fügen auch das kleine farbige Quadrat oben links im Modul hinzu, ein visueller Indikator für die Art des Inhalts, der es ist.
Die nächste Änderung besteht darin, einige der äußeren Lücken bei schmaleren Bildschirmgrößen zu verringern. Auf Breitbildschirmen ist der Inhalt 80% breit (10% breite Kanten), aber es fühlt sich besser an, auf kleineren Bildschirmen (5% breite Kanten) eher 90% zu erreichen.
Wir fügen einen kleinen Übergang hinzu, wenn diese Medienabfrage eintritt, was ein wirklich lustiger Designer-Trick sein kann. Ich mag es in diesem Video, aber irgendwann wurde dies aus dem Design gezogen. Es kann abgehackt werden, wenn die Seite viel mehr Inhalt enthält und eher ablenkt.
Wir ändern unser Rastersystem so, dass es einen Haltepunkt bei der kleinsten Größe hat. Es ist super einfach, wir hören einfach auf, die Säulen zu schweben und machen sie zu width: 100%;Yay, weil sie die Gitter nicht überdenken! Unterwegs kämpfen wir mit einigen Spezifitätsproblemen.
Wir öffnen den echten iOS-Simulator, um das Raster auf einem „echten“ Mobilgerät zu überprüfen. Wir haben ein bisschen Mühe, das richtige Meta-Tag zu finden, aber letztendlich müssen wir uns das richtige von CSS-Tricks.com schnappen. Es klappt! Aber natürlich haben wir einige Positionierungsprobleme, die wir lösen müssen. Für den Datensatz lautet dieses Meta-Tag:
Wir basteln basteln mit Abstand und Größe, bis alles in Ordnung ist. Am Ende sieht es ziemlich gut aus!