Desain responsive ketika mode mobile(html & css native)

desktop.jpgDesktopmobile.jpgMobile
Saya membuat countdown dengan html, css & jQuery.
tapi pas di coba di mode mobile tampilannya berantakan.
source code :
https://gist.github.com/yuxxeun/e92efed27af6cab2c328f6269afd46e3
avatar yuxxeun

Ditanyakan oleh @yuxxeun

16 Kontribusi 7 Poin

Login untuk menanggapi


Jawaban

Ya memang seperti itu.
Non-responsive = tampilan sama dengan pc, otomatis tulisan jadi kecil
Responsive = besar tulisan sama atau lebih kecil, tampilan berbeda (menyesuaikan device)
Jadi itu aturan bakunya, pilih tampilan atau tulisan.

Saya nggak tau targetnya maunya gimana, karena penyelesaiannya ada 2. Yg jelas agan mau tampilannya responsive.
1. Countdown harus 1 baris
Ini target yang lebih mudah. Agan tinggal kecilin aja huruf untuk countdown nya.
2. Countdown boleh tidak sebaris, ukuran huruf tetap besar
Yang perlu agan otak-atik kode bagian ini:
<div class="form-row">
  <div class="aspirasi input-group text-center">
    <div class="col-md-12 col-xs-12 px-auto">
Mungkin bisa pake teknik lain, seperti div biasa. Kalo dilihat dari kodenya, karena ada class row, maka countdown nya dikunci harus dalam 1 row.
avatar ChronoJava

Dijawab oleh @ChronoJava

40 Kontribusi 21 Poin

  • 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. - @yuxxeun
  • 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. - @ChronoJava

Login untuk menanggapi


Login untuk gabung berdiskusi