 |
| Source: jagodesain.com |
Pada kasus ini, beberapa orang mungkin lebih menyukai tampilan list pada artikel di versi mobile ketimbang grid seperti pada versi sebelum update (v1.26). Selain lebih hemat ruang, tampilan list juga sangat cocok untuk blog media karena lebih memudahkan pembaca untuk mencari judul artikel yang mereka inginkan.
Jika Anda ingin mencoba mengembalikan tampilan artikel pada mobile silahkan tambahkan beberapa baris kode CSS dibawah ini.
Catatan:
Semua kode CSS dibawah ini harus ditambahkan pada kumpulan kode @media screen and (max-width:480px){...} agar supaya tidak mempengaruhi tampilan desktopnya.
Untuk memudahkan Anda menempatkan kodenya, carilah @media screen and (max-width:480px){ hanya ada satu kode tersebut dalam CSS template ini. Anda akan menemukan contoh kode seperti dibawah ini:
@media screen and (max-width:480px){
...
...
...
...
.FeaturedPost article .item-content{padding:0 5px 8px;width:100%}Tambahkan beberapa baris kode CSS ini tepat dibawahnya, sehingga kodenya kurang lebih menjadi seperti dibawah:
@media screen and (max-width:480px){
...
...
...
...
.FeaturedPost article .item-content{padding:0 5px 8px;width:100%}
.multipleItem .Blog .blog-posts article{width:100%;display:flex;align-items:center;flex-direction:row-reverse;padding:8px;margin:0 0 12px}
.multipleItem .Blog .blog-posts article:nth-of-type(3n){margin-right:0}
.multipleItem .Blog .blog-posts article .post-thumbnail{flex-shrink:0;width:90px;margin:0 0 0 15px}
.multipleItem .Blog .blog-posts article .post-thumbnail a{padding-top:100%}
.multipleItem .Blog .blog-posts article .post-content{flex-grow:1;padding-left:5px}
.multipleItem .Blog .blog-posts article .post-title{font-weight:400}
.nav-menu:checked + .mainWrapper .mainIner.multipleItem .Blog .blog-posts article{width:100%;margin-right:0}
.nav-menu:checked + .mainWrapper .mainIner.multipleItem .Blog .blog-posts article:nth-of-type(3n){margin-right:0}Simpan template Anda, untuk melihat perubahannya bukalah blog Anda pada Smartphone.
