Hallo teman-teman, balik lagi di artikel dumet school, nah pada artikel kali ini saya akan mengajarkan bagaimana Membuat Gallery Responsive Menggunakan @Media Query CSS untuk teman-teman yang belum paham media query CSS.

Silahkan buka artikel saya sebelumnya Di sini, nah sekarang kita langsung praktek saja, silahkan teman-teman buat sebuah file html dan ketikan script berikut:

Sekarang coba tambahkan script CSS berikut ini :

Nah jika di-save, maka hasilnya akan seperti berikut:

01

Jika kita kecilkan layar, maka hasilnya akan seperti berikut :

02

Hasilnya akan terpotong karena basicnya kita tidak membuat tampilan tersebut menyesuaikan layar, nah sekarang kita akan buat tampilan ini menyesuaikan layar yang kita tentukan.

Sekarang balik lagi ke script CSS dan tambahkan script berikut:

Nah dengan penyesuaian layar seperti di atas maka hasilnya akan seperti ini.

03n

Ini tampilan pada saat ukuran layar 800px.

 

04

Ini untuk tampilan layar dengan ukuran 265px.

Oke silahkan mencoba, semoga tutorial kali ini bermanfaat.

Terimakasih.