Menyembunyikan Elemen HTML Pada Ukuran Layar Device Mobile

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya menyembunyikan elemen HTML ketika kita buka website kita di ukuran layar mobile dan tablet. Sebenaranya cara ini sangat mudah sekali kita lakukan, jika kita membuat kerangka websitenya menggunakan Framework CSS Bootstrap, tetapi di sini saya akan mengajarkan bagaimana caranya menyembunyikan elemen HTML menggunakan CSS3 Media Queries. Baik kita akan langsung mencoba nya saja ya teman-teman, di sini saya sudah membuat tampilan website sederhana menggunakan HTML & CSS seperti berikut.

Pada tampilan website di atas kita akan coba menghilangkan elemen Banner image yang ada pada website tersebut.

Pertama-tama yang harus kita lakukan adalah, kita akan membuat rumus Media Queries seperti berikut.

Selanjutnya kita akan memanggil attribute class="banner1" tersebut, dan kita akan berikan property CSS3 display : none; seperti berikut ini :

Pada penulisan Media Queries di atas maksudnya adalah, ketika kita membuka website kita di ukuran layar min-device-width: 320px maka elemen Banner tersebut akan menghilang sampai dengan ukuran layar max-device-width: 980px. Selain untuk menghilangkan Banner seperti contoh di atas, kita juga bisa menambahakna property-property CSS lainnya sesuai dengan kebutuhan teman-teman.

Kemudian teman-teman bisa coba jalankan website tersebut di browser Firefox dan tekan CTRL + SHIFT + M, dan coba ubah ukuran layarnya menjadi kurang dari 980px, maka Banner  tersebut akan menghilang.

Nah dengan menggunakan CSS3 Media Queries kita juga dapat membuat website menjadi Responsive dengan mudah. Itulah tutorial singkat dari saya, semoga dengan tutorial ini pengetahuan kalian tentang CSS3 menjadi bertambah ya teman-teman. Sampai ketemu di tutorial saya berikutnya. Terima kasih.