Cara Mengembalikan Tampilan Artikel pada Versi Mobile

Cara mengembalikan tampilan artikel pada versi mobile di template median ui
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 kamu ingin mencoba dan mengembalikan tampilan artikel pada versi mobile silahkan tambahkan beberapa baris kode CSS seperti 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, kamu harus menempatkan kodenya, carilah @media screen and (max-width:480px){ hanya ada satu kode tersebut dalam CSS template ini. Kamu nanti 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 contoh 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}
Selanjutnya silahkan simpan template kamu, untuk melihat perubahannya silahkan kunjungi dan buka blog kamu pada Smartphone.

Rate this article

Getting Info...

Post a Comment

Copyright ©Masdzgn - All rights reserved.

Redesign by protemplates
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details