Kami bermula dengan bermain dengan modul catatan blog kami, bermain-main dengan jarak. Kami juga menambah kotak berwarna kecil di kiri atas modul, penanda visual jenis kandungannya.
Perubahan seterusnya yang kami buat adalah untuk mengurangkan beberapa jurang luar pada ukuran skrin yang lebih sempit. Pada skrin lebar, kandungannya selebar 80% (tepi lebar 10%) tetapi lebih baik 90% pada skrin yang lebih kecil (tepi lebar 5%).
Kami menambah sedikit peralihan ketika pertanyaan media itu berjaya, yang boleh menjadi muslihat perancang yang sangat menyeronokkan. Saya suka dalam video ini, tetapi akhirnya ini menarik dari reka bentuknya. Ia boleh menjadi berombak apabila terdapat lebih banyak kandungan di halaman dan agak mengganggu.
Kami mengubah sistem grid kami untuk mempunyai breakpoint pada ukuran terkecil. Sangat mudah, kami berhenti mengapung lajur dan menjadikannya width: 100%;Yay kerana tidak terlalu memikirkan grid! Kami memerangi beberapa masalah kekhususan dalam perjalanan.
Kami membuka simulator iOS sebenar untuk melihat grid yang berfungsi pada peranti mudah alih "nyata". Kami agak sukar untuk mencari meta tag yang tepat, tetapi akhirnya mengambil yang betul dari CSS-Tricks.com. Ianya berfungsi! Tetapi tentu saja kita mempunyai beberapa masalah kedudukan yang perlu kita atasi. Untuk rekod, tag meta tersebut adalah:
Kami tinker tinker tinker dengan jarak dan ukuran sehingga semuanya kelihatan baik. Segala-galanya kelihatan cukup responsif pada akhirnya!