Vi starter med at lege med vores blogindlægsmodul og snuble med afstand. Vi tilføjer også den lille farvede firkant øverst til venstre i modulet, en visuel betegnelse for den type indhold, det er.
Den næste ændring, vi foretager, er at mindske nogle af de udvendige huller i smallere skærmstørrelser. På brede skærme er indholdet 80% bredt (10% bredde kanter), men det føles bedre at gå mere som 90% på mindre skærme (5% bredde kanter).
Vi tilføjer en lille overgang til, når denne medieforespørgsel rammer, hvilket kan være et rigtig sjovt designer-y-trick. Jeg kan godt lide det i denne video, men til sidst blev dette trukket fra designet. Det kan blive urolig, når der er meget mere indhold på siden og ret distraherende.
Vi ændrer vores netsystem til at have et brudpunkt i den mindste størrelse. Det er super nemt, vi holder bare op med at flyde søjlerne og gør dem til width: 100%;Yay for ikke at tænke over gitre! Vi kæmper med nogle specificitetsproblemer undervejs.
Vi åbner den rigtige iOS-simulator for at tjekke nettet, der fungerer på en "ægte" mobilenhed. Vi kæmper lidt med at finde det rigtige metatag, men i sidste ende hænger det rigtige af CSS-Tricks.com. Det virker! Men selvfølgelig har vi nogle positioneringsproblemer, vi skal løse. For metoden er dette metatag:
Vi tinker tinker tinker med afstand og størrelse indtil ting ser OK ud. Ting ser ser pænt lydhør ud i slutningen!