Dalam screencast ini kita akan menggali bagian Deals. Bagian Transaksi pada dasarnya adalah "dinding iklan". Ini adalah area situs yang harus dinavigasi sendiri oleh orang-orang, jadi saya tidak khawatir iklan akan mengganggu pikiran orang. Juga, setiap iklan memiliki diskon di atasnya dan merupakan produk yang saya rekomendasikan secara pribadi, jadi tidak ada keteduhan yang terjadi.
Kami sudah memiliki tajuk di tempatnya. Kami juga sudah memiliki konten yang dimuntahkan ke halaman yang perlu kami atur. Ini adalah tempat yang tepat untuk memulai menulis beberapa CSS.
Yang keren dari halaman ini adalah kita dapat menceburkan diri ke dalam dunia periklanan responsif. Dunia periklanan benar-benar belum mengejar desain responsif. Iklan sering kali berukuran tetap dan mengubah ukurannya sulit atau langsung dilarang. Itu tidak terjadi di situs ini karena saya membuat iklan sendiri.
Setiap iklan dibuat dari gambar latar, gambar logo, dan potongan teks. Dengan menggunakan background-imagesarana kita bisa memotong tepi itu dan tidak apa-apa. Kami tidak kehilangan teks atau bagian penting dari logo.
Tata letak “dinding” ini akan seperti dinding =). Kami akan membuatnya menjadi tiga kolom pada ukuran desktop yang lebar dan kemudian turun ke dua kolom dan akhirnya satu kolom pada ukuran telepon. Yang kita lakukan hanyalah mengapungkan iklan dan menerapkan a min-heightagar semuanya tetap tinggi. Pada kueri media yang berbeda, kami cukup menyesuaikan lebar iklan dan mengubah mana yang memiliki margin kanan dan mana yang tidak (melalui :nth-child).
Di bagian belakang, setiap iklan adalah bidang khusus di WordPress. Saat kami mengeluarkannya ke halaman, pertama-tama kami menanyakannya dan memasukkannya ke dalam array. Kemudian kocok larik itu. Lalu akhirnya gema. Sebaiknya berikan semua kesempatan yang adil untuk menjadi iklan teratas!