We beginnen met spelen met onze blogpostmodule, rommelen met spaties. We voegen ook het kleine gekleurde vierkantje linksboven in de module toe, een visuele aanduiding van het type inhoud dat het is.
De volgende wijziging die we aanbrengen is het verkleinen van enkele van de openingen aan de buitenkant bij smallere schermformaten. Op brede schermen is de inhoud 80% breed (10% breedte randen) maar het voelt beter om meer als 90% te gaan op kleinere schermen (5% breedte randen).
We voegen een kleine overgang toe voor wanneer die mediaquery toeslaat, wat een heel leuke designer-truc kan zijn. Ik vind het leuk in deze video, maar uiteindelijk werd dit uit het ontwerp gehaald. Het kan schokkerig worden als er veel meer inhoud op de pagina staat en nogal afleidend.
We veranderen ons rastersysteem om een breekpunt op de kleinste maat te hebben. Het is supereenvoudig, we stoppen gewoon met het zweven van de kolommen en maken ze width: 100%;Yay voor niet overdreven roosters! We bestrijden onderweg enkele specificiteitsproblemen.
We openen de echte iOS-simulator om te zien hoe het raster werkt op een "echt" mobiel apparaat. We worstelen een beetje met het vinden van de juiste metatag, maar uiteindelijk krijgen we de juiste met CSS-Tricks.com. Het werkt! Maar natuurlijk hebben we enkele positioneringsproblemen die we moeten oplossen. Voor de goede orde, die metatag is:
We sleutelen aan het sleutelen aan afstand en maatvoering totdat alles er goed uitziet. Tegen het einde zien de dingen er redelijk goed uit!