Berbagai Teknik Menyembunyikan Elemen Ukuran Di Foundation

Visibility Class

Menyembunyikan Elemen Berdasarkan Ukuran Layar

Untuk menyembunyikan elemen pada ukuran layar tertentu kita dapat menggunakan nama class dengan prefiks hide. Berikut contoh nama class untuk menyembunyikan elemen pada layar sedang:

• hide-for-medium, untuk menyembunyikan elemen pada ukuran layar sedang dengan lebar minimal 641px.
• hide-for-medium-only, untuk menyembunyikan elemen pada ukuran layar sedang dengan lebar antara 641 px sampai 1024px.
• hide-for-medium-up, untuk menyembunyikan elemen pada ukuran layar sedang dan ukuran layar yang lebih besar.
• hide-for-medium-down, untuk menyembunyikan elemen pada ukuran layar sedang dan ukuran layar yang lebih kecil.

Untuk menyembunyikan elemen pada ukuran layar yang lain, kita tinggal ganti kata medium pada nama-nama class di atas menjadi small, large, xlarge, atau xxlarge. Lihat skrip ini untuk mengetahui ukuran layar masing-masing jenis ukuran tersebut.

Skrip hide by size.html

<p class="panel">

    <strong class="hide-for-small-only">Teks ini tidak tampil pada 

              small screen</strong>

    <strong class="hide-for-medium-up">Teks ini tidak tampil pada

              medium, large, xlarge, or xxlarge screen.</strong>

    <strong class="hide-for-medium-only">Teks ini tidak tampil

              pada  a medium screen.</strong>

    <strong class="hide-for-large-up">Teks ini tidak tampil

              pada large, xlarge, or xxlarge screen.</strong>

    <strong class="hide-for-large-only">Teks ini tidak tampil

              pada large screen.</strong>

    <strong class="hide-for-xlarge-up">Teks ini tidak tampil

              pada xlarge screen dan yang lebih besar. </strong>

    <strong class="hide-for-xlarge-only">Teks ini tidak tampil

              pada xlarge screen.</strong>

    <strong class="hide-for-xxlarge-up">Teks ini tidak tampil

              pada an xxlarge screen.</strong>

Baca Juga: Cara Merakatan Text dengan Menggunakan Skrip Foundation!

Share :