lostyazilim

Kapandı: Helppp Slider yükseklik problemi

3 Mesajlar 648 Okunma
lstbozum
wmaraci reklam

Sailort Sailort WM Aracı Kullanıcı
  • Üyelik 10.03.2018
  • Yaş/Cinsiyet 50 / E
  • Meslek Bilişim
  • Konum İstanbul Anadolu
  • Ad Soyad A** T**
  • Mesajlar 211
  • Beğeniler 117 / 25
  • Ticaret 1, (%100)
Merhaba;

Kullandığım bileşende slider seçime göre 3 lü 5 li yan yana olarak çalışıyor.
Mobil de baktığımda alt alta geliyor. Yüksekliği özelliklerden 200px yaptığımda tek sıra oluyor 300px yaparsam altına 2. resim yarım geliyor.

300px verip ikincisinin gelmemesi ve resmin yüksekliğinin büyümesini nasıl yapabilirim.

 

 

wmaraci
reklam

Lions Lions WM Aracı Kullanıcı
  • Üyelik 05.05.2017
  • Yaş/Cinsiyet 29 / E
  • Meslek Web-Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 1027
  • Beğeniler 366 / 534
  • Ticaret 5, (%100)
Görsellere class / ID atayıp CSS ile mobilde farklı masaüstünde farklı yapabilirsiniz. Örneğin 1.görsel için class="birinci-resim" 2.görsel için class="ikinci-resim" ataması yapıp CSS dosyanıza:



.birinci-resim {
height: 300px!important;
}

.ikinci-resim {
height: 300px!important;
}

@media only screen and (max-width: 600px) {
.birinci-resim {
height: 300px!important;
}

.ikinci-resim {
height: 200px!important;
}
}



Böylece ikinci görseliniz masaüstünde 300px, mobilde 200 px olarak görünür. Bu arada yükseklik ve genişlik verirken px yerine % kullanmanızı tavsiye ederim. % değerler, sayfanın açıldığı cihazın ekranına göre otomatik boyutlanır. Örneğin resim için width: 100%; değeri verirseniz ben hangi cihazdan açarsam açayım o cihazın genişliği kadar görünür. Ama 300 px verirseniz ve ben 100px'lik alana sahip bir cihazdan açarsam görsel yine yarım görünür.
Sailort

kişi bu mesajı beğendi.

Sailort Sailort WM Aracı Kullanıcı
  • Üyelik 10.03.2018
  • Yaş/Cinsiyet 50 / E
  • Meslek Bilişim
  • Konum İstanbul Anadolu
  • Ad Soyad A** T**
  • Mesajlar 211
  • Beğeniler 117 / 25
  • Ticaret 1, (%100)

Lions adlı üyeden alıntı

Görsellere class / ID atayıp CSS ile mobilde farklı masaüstünde farklı yapabilirsiniz. Örneğin 1.görsel için class="birinci-resim" 2.görsel için class="ikinci-resim" ataması yapıp CSS dosyanıza:



.birinci-resim {
height: 300px!important;
}

.ikinci-resim {
height: 200px!important;
}

@media only screen and (max-width: 600px) {
.birinci-resim {
height: 300px!important;
}

.ikinci-resim {
height: 200px!important;
}
}



Böylece ikinci görseliniz masaüstünde 300px, mobilde 200 px olarak görünür. Bu arada yükseklik ve genişlik verirken px yerine % kullanmanızı tavsiye ederim. % değerler, sayfanın açıldığı cihazın ekranına göre otomatik boyutlanır. Örneğin resim için width: 100%; değeri verirseniz ben hangi cihazdan açarsam açayım o cihazın genişliği kadar görünür. Ama 300 px verirseniz ve ben 100px'lik alana sahip bir cihazdan açarsam görsel yine yarım görünür.



çok teşekkür ederim.
Lions

kişi bu mesajı beğendi.

wmaraci
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al