Vi begynner med å leke med blogginnleggsmodulen vår og fikle med avstand. Vi legger også til den lille fargede firkanten øverst til venstre i modulen, en visuell betegnelse for typen innhold det er.
Den neste endringen vi gjør er å redusere noen av de ytre hullene på smalere skjermstørrelser. På brede skjermer er innholdet 80% bredt (10% bredde kanter), men det føles bedre å gå mer som 90% på mindre skjermer (5% bredde kanter).
Vi legger til en liten overgang for når det mediespørsmålet treffer, noe som kan være et veldig morsomt designer-y-triks. Jeg liker det i denne videoen, men til slutt ble dette trukket fra designet. Det kan bli hakkete når det er mye mer innhold på siden og ganske distraherende.
Vi endrer nettsystemet vårt for å ha et bruddpunkt i den minste størrelsen. Det er super enkelt, vi slutter bare å sveve kolonnene og gjør dem til width: 100%;Yay for ikke å tenke over rutenett! Vi kjemper mot noen spesifisitetsproblemer på veien.
Vi åpner den virkelige iOS-simulatoren for å sjekke ut rutenettet som fungerer på en “ekte” mobilenhet. Vi sliter litt med å finne den riktige metakoden, men til slutt henter vi den rette av CSS-Tricks.com. Det fungerer! Men selvfølgelig har vi noen posisjoneringsproblemer vi trenger å trene. For ordens skyld er den metataggen:
Vi pusler tinker pusler med avstand og størrelse til ting ser OK ut. Ting ser ganske pent responsive ut til slutt!