Először a blogbejegyzés-modulunkkal való játékkal kezdjük, a szóközökkel babrálunk. Hozzáadjuk a modul bal felső sarkában található kis színes négyzetet is, amely vizuális jelzője annak, hogy milyen típusú tartalomról van szó.
A következő változtatás az, hogy szűkebb képernyőméreteknél csökkentjük a külső hézagok egy részét. Széles képernyőkön a tartalom 80% széles (szélessége 10% szélességű), de jobb érzés, ha kisebb képernyőkön (5% szélességű széleken) inkább 90% -ra megy.
Kis átmenetet adunk arra az esetre, amikor a média lekérdezés eléri, ami igazán szórakoztató tervező-trükk lehet. Tetszik ebben a videóban, de végül ezt kihúzták a tervezésből. Akkor lehet szaggatott, ha sokkal több tartalom van az oldalon és meglehetősen zavaró.
Megváltoztatjuk a rácsrendszerünket, hogy a legkisebb töréspont legyen. Nagyon egyszerű, csak abbahagyjuk az oszlopok lebegtetését, és width: 100%;Yay-vé tesszük őket, mert nem gondolják túl a rácsokat! Néhány sajátossági problémával küzdünk útközben.
Megnyitjuk az igazi iOS szimulátort, hogy megnézzük a „valódi” mobileszközön működő rácsot. Kicsit küzdünk a megfelelő metacímke megtalálásával, de végül ragasszuk el a megfelelőt a CSS-Tricks.com webhelyről. Működik! De természetesen vannak helymeghatározási problémáink, amelyeket ki kell dolgoznunk. A nyilvántartás szempontjából ez a metacímke:
Bütykölünk bütykökkel a távolságokkal és a méretezéssel, amíg a dolgok rendben vannak. A dolgok elég szépen reagálnak a végére!