Cara Sembunyikan Block di Tampilan Mobile – Gutenberg WordPress

Posted on by

Halo!

Pasti sudah terbiasa dengan Gutenberg sekarang ya? sepertinya posting pakai classic mode udah engga jaman. Enaknya lagi sekarang kita sudah bisa membuat tampilan bagus dengan Gutenberg, tanpa menggunakan page creator (seperti elementor misalnya), cukup pakai Gutenberg saja.

Nah, jika anda sudah terbiasa pakai gutenberg anda pasti sudah terbiasa dengan block kan ya? di mana block ini seperti paragraf lah kalau dalam penulisan umum.

Ada kemungkinan anda memiliki sebuah block yang perlu ditampilkan di layar lebar (pc / laptop) tetapi tidak mau menampilkan di mobile. Gimana caranya?

Langsugn aja ya!

  1. Pada block anda, yang pingin disembunyikan di mobile
    • klik tiga titik
    • pilih tampilkan pengaturan lainnya
    • klik tingkat lanjut
    • pada kelas css tambahan masukkan text “hideonmobile”
  2. Buat custom css di themes
    • tampilan -> sesuaikan
    • klik CSS Tambahan
    • ketikkan kode di bawah ini di dalam CSS tambahan
    • pada akhir kode tambahkan baris kosong (enter)
@media (max-width: 767px){.hideonmobile{display: none;}}

atau ini

/* Custom CSS untuk menyembunyikan class pada perangkat mobile */
@media only screen and (max-width: 767px) {.hideonmobile {display: none;}}

Teknik di atas tidak hanya dipakai di Gutenberg tentunya, tetapi bisa dimanapun, yang penting anda tahu bagaimana cara membuat custom CSS pada sebuah paragraf atau block, disesuikan dengan page buildernya.