Diskusi Muqadir, ST

Muqadir, ST
Ditanyakan pada: Membuat Section Product

Membuat tampilan product

Bagaimana caranya agar pada layar pc tampil dengan 4 product dan pada hp dengan layar horizontal tampil dua product, sedangkan pada modul hanya dengan tiga item-product, begitu ditambahkan lebih dari pada 3 seharusnya turun kebawah ?

3 Jawaban

Bantu Jawab
Avatar
BroKoding

setahun yang lalu

Halo kak, pada kelas ini karena tanpa menggunakan library akan sedikit rumit dengan hanya native css karena harus mengatur juga untuk media query menyesuaikan lebar viewport dari device yang digunakan. Contoh apabila menggunakan library bootstrap bisa menggunakan class row dan colyang merupakan sistem grid. Berikut contoh sederhana dari dokumentasi resmi bootstrap : https://getbootstrap.com/docs/5.0/layout/grid/#responsive-classes

Avatar
Levianth

setahun yang lalu

Hi kak, yang kakak tanyakan ini sudah memasuki materi responsive website ya kak, dan ini perlu kakak perdalam lagi untuk bagaimana responsive itu bekerja dan yang kakak tanyakan pun itu bisa dilakukan setelah kakak mengerti bagaimana responsive itu bekerja ya kak dan nantinya kakak akan mempelajari yang namanya Media Query untuk responsive nya ya kak :D

Semoga membantu :D

Avatar
Faisal Hanafi

setahun yang lalu

dalam case ini kaka bisa menggunakan responsive bisa dengan css grid atau dengan media query untuk membuat tampilan menjadi resnponsive pada setiap devicenya kak berikut refrensinya https://www.w3schools.com/css/css_rwd_mediaqueries.asp