olNGIb4NkK5r2x7x4oG3GpEzizVpnY6KNCck9cym

Mengembalikan Tampilan Artikel pada Versi Mobile

Mengembalikan Tampilan Artikel pada Versi Mobile
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.

Related Posts
Newest Older

Related Posts

Post a Comment