Custom CSS Drupal Bootstrap Tidak Bekerja Di Layar Lain

Custom CSS Drupal Bootstrap Tidak Bekerja Di Layar Lain,  itulah judul yang saya tuliskan dalam pertanyaan di forum Drupal Indonesia, sebenarnya ini adalah cerita yang konyol, saya yakin bahwa saya mengerti tentang media query, namun pada waktu itu karena kurang teliti maka akhirnya ada beberapa custom style yang tidak berjalan pada saat dilihat dilayar lain, khususnya di layar - layar jenis laptop. Masalah ini sampai membuat saya pusing, karena rencananya projek tersebut mau saya pasarkan, namun gara - gara hal ini

Baca : Cara Mudah membuat Website Cantik Dengan Drupal & Bootstrap

Beginilah pertanyaan saya di komunitas Drupal Indonesia

[ASK] [SHARE] [CURHAT] 

Custom CSS Drupal Bootstrap Tidak Bekerja Di Layar Lain

Saya tidak paham mengenai jenis – jenis layar, dan bagaiman menuliskan judul yang tepat untuk kasus yang saya alami. Saya masih baru, dan perlu banyak belajar, sekalian itung – itung, share + curhat, siapa tahu ada yang pernah mengalaminya…. heheh

Saya melakukan konfigurasi situs Drupal saya pada komputer 1, konfigurasi tersebut termasuk custom style (style.css). Disini Saya menggunakan template Bootstrap dan dibuat subtheme-nya. Saya sedikit menambahkan custom style nya, dan semuanya sudah selesai dan tampil dikomputer 1 sesuai dengan harapan

Sesudah semuanya selesai saya coba pindahkan projek tersebut ke laptop (2), dan saat ditampilkan di laptop, custom style yang sudah saya buat sebelumnya TIDAK BEKERJA sama sekali, alias tidak mereplace, NAMUN, saat di layar 2 (dua) browser di laptop diperkecil ke skala tertentu custom style (style.css) saya langsung bekerja, tampilannya sesuai dengan layar 1 (satu), tapi ketika di full screen, style.css tidak bekerja lagi dan tampilan tidak sesuai harapan.

Saya tidak paham mengapa pada layar 1, semuanya baik – baik saja, namun pas di test di layar 2 (laptop) custom style bermasalah. Saya tidak tahu apa penyebabnya, dan bagimana mengatasinya.

Contoh sederhana, saya buat custom style untuk warna tautan pada view artikel, saat dilayar 1, custom style tersebut bekerja sesuai harapan, namun pada layar 2, seolah – olah custom tersebut tidak bekerja, kecuali layar browser di perkceil ke skala tertentu, custom style langsung aktif. 

/** Custom Artikel Node*/
.node-type-article .field-items img {margin:20px auto;}
.node-type-article .media-body h4 a {font-size: 15px; color: #222;}
.node-type-article .media-body a:hover {text-decoration: none; color: #337ab7;}
.page-artikel .media-body a {text-decoration: none; color: #222;}
.page-artikel .media-body a:hover{text-decoration: none; color: #337ab7;}

Kalau saya perhatikan (inspect element) saya lihat seperti ada kode token dibelakang style yang saya buat, namun saya tidak tahu apakah ini berpengaruh atau tidak ? . Lalu juga saya berpikir apakah ini harus pake media query atau apa ? karena kalau menurut pemikiran saya, seharusnya custom style saya harus diakses pertama kali sebelum style yang lain, selain itu di layar 2 custom style otomatis aktif kalau layar di browser di perkecil dalam skala tertentu.

Saya berpikir untuk membuat ulang dari awal dan mencobanya di laptop, tapi saya pikir itu merepotkan, lagi pula saya penasaran dengan masalah ini, ada banyak hal yang tidak saya paham sehingga saya menuliskannya disini, mudah – mudahan dapat solusi untuk bagaimana mengatasinya, apa perlu bikin custom style lagi, dan membuatnya di laptop, atau bagaimana ?

--------selesai

Beberapa teman di komunitas drupal banyak yang menanggapi pertanyaan saya ini, mereka memberikan jawaban yang bagus, namun waktu itu saya masih belum bisa menyadari kesalahan yang saya buat, hingga akhirnya, ada seorang teman drupal yang berkomentar dengan memberikan rekaman video dari masalah yang saya alami, direkaman video tersebut saya melihat ada media query yang aktif, padahal saya tidak pernah mendefinisikan media query untuk custom link yang saya buat, dan setelah diperiksa ternyata ada media query pada custom slide carousel yang saya buat yang LUPA DITUTUP, sehingga mempengaruhi custom style yang lain yang seharusnya tidak menggunakan media query, malah ikut terkena efek dari media query karena lupa memberikan tag penutup pada media query, yaitu pada bagian 

@media screen and (max-width: 1090px){
.title-carousel-custom{ font-size: 24px;}

Baca : Mengatasi Carousel Module Views Bootstrap yang Kurang Responsif

Hal tersebut membuat semua custom style yang saya buat ketika diakses dilayar jenis laptop pada saat full screen menjadi tidak aktif. 

Masalahnya memang sederhana dan sangat konyol, semuanya gara - gara saya lupa nutup media query untuk slide carousel yang saya buat.

Thanks Komounitas Drupal Indonesia : Khalid Bin Walid, Pri Yan To, Pawn Prince

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple