Mobil kullanıcılardan div etiketini gizlemek

Mobil kullanıcılardan div etiketini gizlemek

Geçenlerde adisyon programımı geliştirirken, mobil versiyon üzerinde gözükmesini istemediğim bir kaç bölüm olduğuna karar verdim. Bu ihtiyacımdan dolayı, ufak bir araştırma yaparak CSS ile div veya herhangi bir etiketi mobil sürümde nasıl gizleyeceğimi öğrenmiş oldum. Hemen sizlerle paylaşmak istiyorum, uygulaması oldukça basit olan sadece bir kod bloğumuz bulunmakta.

Bir kaç css kodu ile çok bilginiz olmasa daha yapabileceğiniz bu işlem şöyle yapılıyor. Örneğin elimizde reklam kodu var bunu sadece masaüstü kullanıcılarına göstermek istiyoruz. (Not: Bunun tam tersi de mevcut  yani sadece mobil kullanıcılarınızın div etiketini görmesi içinde yapabilirsiniz. )

@media screen and (max-width: 600px) {
  .nomobile {
    visibility: hidden;
    clear: both;
    float: right;
    margin: 5px auto;
    width: 22%;
    height: auto;
    display: none; // Önemli olan nokta burası burayı kaldırırsanız sadece mobile için görüntülenir. 
  }
}

Buradaki en önemli nokta display:none; kodu olup mobil ekranda çıkmasını istiyorsanız bu etiketi kaldırmanız yeterlidir.

<div class=”nomobile”>Mobil Kullanıcılardan div etiketini gizle</div>
Burada illa div tagında kullanma zorunluluğu yoktur. Diğer etiketlerde de kullanabilirsiniz.
<p class=”nomobile”>etiketleri arasına bile alabilirsiniz.</p>

Aklınıza takılan bir yer varsa yorumlarda belirtmeniz yeterli olacaktır.

Bu içeriğe emoji ile tepki ver
2 kullanıcı tepki verdi
Onu henüz tanımıyoruz.
Bunlar da ilginizi çekebilir
Benzer yazıları okuyabilirsiniz.
0 Yorum
Yorumları okuyabilir ve cevaplayabilirsiniz.

Yorum Yazın
E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlendi.