loading...
Selamat datang di The Royal Moringa. Kali ini saya akan berbagi informasi kepada anda mengenai tips sederhana untuk membuat widget yang anda pasang tampil responsive untuk segala ukuran layar. Hal ini berlaku untuk semua widget yang anda pasang baik widget footer, subscribe, testimonials maupun gallery. Mungkin selama ini ketika pemasangan widget, anda hanya mengecek hasil pemasangan anda melalui satu ukuran layar misalnya tampilan desktop yaitu komputer dan laptop. Dari hasil pengecekan ternyata widget tersebut tampak rapi dan teratur. Tetapi ketika anda mencoba mengunjungi website anda melalui smartphone atau tablet (desktop view), tampilan widget tadi tidak teratur tidak seperti yang tampak pada tampilan komputer atau laptop anda. Entah posisi gambar yang berantakan, footer 3 kolom yang seharusnya satu baris menjadi 2 baris, atau mungkin jarak subscribe box dengan submit button yang terlalu jauh. Mengapa hal ini terjadi?
Pada umumnya ketika pemasangan sebuah widget, kode script css yang dipasang harus mengatur tampilan dari widget tersebut agar sesuai pada semua tampilan layar karena pengunjung website yang beragam dapat mengunjungi situs website kita melalui perangkat elektronik apa saja mulai dari smartphone, tablet, laptop hingga komputer. Namun, bagi anda yang memasang widget tanpa pengaturan tampilan untuk masing-masing ukuran layar pasti akan kesulitan untuk memberikan pengaturan satu-satu.
Kesalahan sederhana yang membuat widget tampil tidak responsive terletak pada pengaturan kode script css. Coba anda lihat kode css dari widget anda, apakah widget anda menggunakan satuan pixel (px) pada saat pengaturan margin ataupun padding? Jika ya, maka disinilah letak permasalahan itu. Sebenarnya tidak masalah kita memberikan ukuran dalam satuan px asalkan ada pengaturan lebih lanjut mengenai tampilan layar biasanya ditandai dengan kode script seperti @media screen and (max-width: 768px) yang bertujuan untuk memberikan pengaturan bagi tampilan layar yang berukuran di bawah 768px. Namun cara ini cukup ribet karena anda harus mencoba satu persatu pada setiap tampilan layar. Bagaimana cara sederhananya?
Cara yang mudah adalah mengganti satuan px pada semua pengaturan widget anda menjadi dalam satuan em atau persen (%). Mengapa? Karena satuan ini dipengaruhi oleh ukuran tampilan layar yang sedang digunakan. Saya akan menjelaskan dalam bentuk contoh supaya anda lebih paham.
Sebuah footer 3 kolom memiliki pengaturan margin left 50px maka pada setiap tampilan layar baik smartphone, tablet, laptop setiap kolom footer memiliki margin left 50px. Pada laptop 50px adalah nilai yang kecil tapi pada smartphone 50px itu jarak yang sangat jauh. Nah, kalau kita pakai % misalkan margin left nya kita atur 2% maka pada laptop ukuran layar 1200px margin left nya adalah 24px sedangkan pada smartphone ukuran layar 340px margin left nya adalah 5,8px. Beda jauh kan ukurannya? Hal yang sama berlaku juga bila kita menggunakan satuan em.
Jadi sekarang apakah anda sudah paham mengenai penjelasan di atas? Jika sudah maka anda telah mendapatkan trik sederhana untuk mengatur widget agar tampil responsive di segala ukuran layar tanpa cara yang ribet. Silakan bertanya jika masih belum mengerti. Semoga artikel ini dapat membantu. Terima kasih telah membaca!
loading...
0 Comments