Halo teman – teman selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Memberbedakan Isi Website Pada Setiap Device dimana latihan kali ini kita akan belajar untuk membuat isi atau konten di dalam website menggunakan bootstrap 4 anggaplah misalnya text dan text tersebut dapat kita ubah – ubah color,backgorund ataupun padding dapat kita sesuaikan.

Baik langsung saja kita implementasikan Cara Memberbedakan Isi Website Pada Setiap Device teman – teman siapkan text editornya dan download bootstrapnya terlebih dahulu. Kemudian kita buat struktur htmlnya seperti gambar di bawah ini

Kemudian save dengan nama index.html, maka hasilnya seperti gambar di bawah ini

Cara Memberbedakan Isi Website Pada Setiap Device

Bisa teman – teman lihat pada detail grid system bootstrap 4, kita akan set pada setiap device dengan menggunakan @media query css. Teman – teman bisa ketikkan script di bawah ini untuk cssnya

Jika sudah save dan jalankan pada browsernya, hasilnya seperti gambar di bawah ini

Pada ukuran di atas 1200 (>1202) maka color akan berubah menjadi yellow

Cara Memberbedakan Isi Website Pada Setiap Device

Kemudian pada saat ukuran maximal 1200 maka akan berubah menjadi warna tomato

Cara Memberbedakan Isi Website Pada Setiap Device

Ukura di bawah 992 juga akan berbeda warna colornya, begitupun pada setiap device yang terkecil, nah itulah tips tentang Cara Memberbedakan Isi Website Pada Setiap Device semoga bermanfaat dan dapat kita gunakan untuk membuat tampilan yang indah. Terimakasih dan sampai jumpa.