Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Desain responsive ketika mode mobile(html & css native)
Desktop
Mobile
Saya membuat countdown dengan html, css & jQuery.
tapi pas di coba di mode mobile tampilannya berantakan. source code :
https://gist.github.com/yuxxeun/e92efed27af6cab2c328f6269afd46e3
1 Jawaban:
<div>Ya memang seperti itu.<br>Non-responsive = tampilan sama dengan pc, otomatis tulisan jadi kecil<br>Responsive = besar tulisan sama atau lebih kecil, tampilan berbeda (menyesuaikan device)<br>Jadi itu aturan bakunya, pilih tampilan atau tulisan.<br><br>Saya nggak tau targetnya maunya gimana, karena penyelesaiannya ada 2. Yg jelas agan mau tampilannya responsive.<br>1. Countdown harus 1 baris<br>Ini target yang lebih mudah. Agan tinggal kecilin aja huruf untuk countdown nya.<br>2. Countdown boleh tidak sebaris, ukuran huruf tetap besar<br>Yang perlu agan otak-atik kode bagian ini:</div><pre><div class="form-row"> <div class="aspirasi input-group text-center"> <div class="col-md-12 col-xs-12 px-auto"></pre><div>Mungkin bisa pake teknik lain, seperti div biasa. Kalo dilihat dari kodenya, karena ada class row, maka countdown nya dikunci harus dalam 1 row.</div>
Tanggapan
untuk card yg background putih udah responsive, tapi yg belum itu countdownnya, karena divnya ditulis di bagian jQuery, pas tak kasih col-sm-12 di div bagian jquery malah kebesaren pas ukuran desktop.
iya, berarti kan clue nya disitu yang diubah. bukan cuma ngubah class, tapi ngubah struktur div nya. kita gak bisa detail nyoba benerin, karena source nya gak lengkap.