Mobil ve Masaüstünde Farklı Tasarımlar (eklentisiz)

0 100

Bazen müşterilerimin sadece masaüstünde veya sadece mobilde görünmesini istediği elementler oluyor.  Mesela arama butonu sadece mobilde çıksın istiyorlar. Ya da bir şeyi mobilde gizlemek… Bunu yapmak az sonra vereceğim css kodları ile sizin için çok kolay olacak. Bu kodları çok aramış, yerli ve yabancı kaynaklarda bulamamıştım. Sonra kendim deneye-yanıla baya bir uğraştıktan sonra yaptım 🙂 Şimdi o kodları paylaşıyorum:

/*mobil ve masaüstü ayrımı-başlangıç*/
@media screen and (max-width: 500px) {
.mobileshow { display:block; }
}

.mobilehide { display:none; }

@media screen and (min-width: 500px) {
.mobilehide { display:block; }
.mobileshow {display:none;}
}
/*mobil ve masaüstü ayrımı-bitiş*/

Yukarıdaki kodları Görünüm>Özelleştir>Ek CSS kısmına yazınız.

Eklediğiniz elemente tanımlayacağınız sınıf “mobileshow” olursa sadece mobilde görünür. Eğer “mobilehide” tanımlarsanız sadece masaüstünde görünür.

Örneğin bir fotoğraf ekleyeceksiniz diyelim. <img class=”mobileshow” src=”http://alanadi.com/deneme.jpg” /> Burada sınıf olarak “mobileshow” tanımladığımız için sadece mobilde görünecektir.

Visual Composer gibi sayfa oluşturucularda ise css sınıfını yazmak için özel bir bölüm bulunur. Eğer sayfa oluşturuculardan birini kullanıyorsanız  css sınıfı yazılması için ayrılan kısımlara css sınıfınızı tanımlayabilirsiniz.

Yukarıda fotoğrafta, visual composer ile oluşturulmuş bir satırı komple masaüstü bilgisyarda gizledik.

Her türlü soru, görüş ve önerilerinizi yorumlarda belirtebilirsiniz.

İyi çalışmalar.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.

WordPress Desteğe mi İhtiyacınız Var ?