Začíname hraním sa s našim modulom blogových príspevkov a fušovaním do medzier. Pridáme tiež malý farebný štvorec v ľavej hornej časti modulu, vizuálny znak typu obsahu, o ktorý sa jedná.
Ďalšou zmenou, ktorú urobíme, je zmenšenie niektorých vonkajších medzier pri užšej veľkosti obrazovky. Na širokouhlých obrazovkách je obsah 80% široký (okraje so šírkou 10%), ale je lepšie cítiť sa skôr ako 90% na menších obrazovkách (okraje so šírkou 5%).
Pridáme malý prechod, keď zasiahne tento mediálny dopyt, čo môže byť skutočne zábavný trik pre návrhárov. Páči sa mi to na tomto videu, ale nakoniec sa to pretiahlo z dizajnu. Môže to byť trhané, keď je na stránke oveľa viac obsahu a skôr to vyrušuje.
Náš mriežkový systém meníme tak, aby mal bod zlomu pri najmenšej veľkosti. Je to super ľahké, iba prestaneme plávať stĺpy a urobíme ich width: 100%;Yay za to, že neprekvapili mriežky! Na ceste bojujeme s niektorými problémami so špecifickosťou.
Otvárame skutočný simulátor iOS, aby sme si vyskúšali mriežku fungujúcu na „skutočnom“ mobilnom zariadení. Trochu sa snažíme nájsť správnu metaznačku, ale nakoniec chytíme tú správnu z CSS-Tricks.com. Funguje to! Ale samozrejme máme nejaké problémy s pozíciou, ktoré budeme musieť vyriešiť. Táto metaznačka je napríklad:
Drotujeme drotára drotára s rozstupmi a veľkosťou, kým veci nevyzerajú dobre. Na konci vyzerá všetko pekne pekne pohotovo!