0
Kayıt Ol

Bu Div Kodunun Hatası Ne?

4

●

200

  • 08-08-2023, 22:30:27
    #1
    zekikaynak
    zekikaynak
    Arkadaşlar sitemde bazı ürünlerde bir uyarı bandı kullanıyorum aşağıdaki gibi



    Siteyi pc'den ziyaret edince hiçbir sorun yok herşey olması gerektiği gibi.. Ancak mobilden ziyaret edince saçmalıyor ve aşağıdaki hale geliyor..



    Hem ikonla yazı birbirine yapışıyor.. Hem de yazı alltan ve üsten div alanının dışına taşıyor..

    Ben ikonla yazı arasında 5px gibi bir boşluk olsun div'de yazıya göre davransın istiyorum öyle saçmalamasın dışarı çıkıp.. Bunu nasıl düzeltebilirim acaba?

    Kullandığım div kodu da aşağıdaki gibi..

    <div style="width: 100%; background-color: #dff0d8; height: 100px; display: flex; margin-bottom: 10px;">
<div style="width: 10%; height: 100px; display: flex; justify-content: center; align-items: center;"><img class="size-full wp-image-5499 aligncenter" src="check-mark.png" alt="Güvenli Gönderi Check Mark" width="50" height="50" /></div>
<div style="width: 90%; height: 100px; padding-right: 10px; display: flex; flex-direction: column; justify-content: center;"><span style="color: #3c763d;"><strong>GİZLİ GÖNDERİ</strong></span><span style="color: #3c763d;">Bizim için, sizin güvenliğiniz ve gizliliğiniz çok önemlidir. Aldığınız her ürün gönderilmeden önce dışarıdan anlaşılmayacak şekilde paketlenir ve kutulanır. Sizin dışınızda hiç kimse paket içeriğini bilemez.</span></div>
</div>
  • Kabul Edilen Cevap
    • DBE
      0 Beğeni
      Mesaja Git
      şunu bir dene hocam ayrıca bu şekilde style kullanımını tavsiye etmiyoruz hocam class olarak açıp ona göre ayarlarsan daha iyi olur diger arkadaşlarda yazmış hegith değeri içteki yazı olan yere verdiğiniz için dıştaki div içeriğin iç height ını 100px zannediyor bu yüzden genişletemiyor kendisini zaten onada 100px vermişsiniz

      <div style="width: 100%; background-color: #dff0d8;  display: flex; margin-bottom: 10px; padding:10px">

<div style="width: 10%; display: flex; justify-content: center; align-items: center;">

<img class="size-full wp-image-5499 aligncenter" src="check-mark.png" alt="Güvenli Gönderi Check Mark" width="50" height="50" /></div>

<div style="width: 90%;  padding-right: 10px; display: flex; flex-direction: column; justify-content: center;"><span style="color: #3c763d;"><strong>GİZLİ GÖNDERİ</strong></span><span style="color: #3c763d;">Bizim için, sizin güvenliğiniz ve gizliliğiniz çok önemlidir. Aldığınız her ürün gönderilmeden önce dışarıdan anlaşılmayacak şekilde paketlenir ve kutulanır. Sizin dışınızda hiç kimse paket içeriğini bilemez.</span></div>
</div>
  • 08-08-2023, 22:38:50
    #2
    oguzhanx
    oguzhanx
    Merhaba,

    div e height değeri atadığınız ve mobil görünümde de div içeriği atanan height değerini aştığı için içerik kapsayıcı divin dışına taşıyor. İkon tarafında ise % olarak width değeri atanmış, mobilde yüzde ekran boyutunun küçük olmasından dolayı daha düşük bir px i eşdeğer alıyor. Kod çok sağlıklı durmuyor açıkçası ama masaüstü görünüm istediğiniz gibiyse media kullanarak mobil için özel Css ataamaları yapabilirsiniz divlere class lar atayarak..
  • 08-08-2023, 22:42:41
    #3
    yasinkrbyk
    yasinkrbyk
    zekikaynak adlı üyeden alıntı: mesajı görüntüle
    Arkadaşlar sitemde bazı ürünlerde bir uyarı bandı kullanıyorum aşağıdaki gibi



    Siteyi pc'den ziyaret edince hiçbir sorun yok herşey olması gerektiği gibi.. Ancak mobilden ziyaret edince saçmalıyor ve aşağıdaki hale geliyor..



    Hem ikonla yazı birbirine yapışıyor.. Hem de yazı alltan ve üsten div alanının dışına taşıyor..

    Ben ikonla yazı arasında 5px gibi bir boşluk olsun div'de yazıya göre davransın istiyorum öyle saçmalamasın dışarı çıkıp.. Bunu nasıl düzeltebilirim acaba?

    Kullandığım div kodu da aşağıdaki gibi..

    <div style="width: 100%; background-color: #dff0d8; height: 100px; display: flex; margin-bottom: 10px;">
<div style="width: 10%; height: 100px; display: flex; justify-content: center; align-items: center;"><img class="size-full wp-image-5499 aligncenter" src="check-mark.png" alt="Güvenli Gönderi Check Mark" width="50" height="50" /></div>
<div style="width: 90%; height: 100px; padding-right: 10px; display: flex; flex-direction: column; justify-content: center;"><span style="color: #3c763d;"><strong>GİZLİ GÖNDERİ</strong></span><span style="color: #3c763d;">Bizim için, sizin güvenliğiniz ve gizliliğiniz çok önemlidir. Aldığınız her ürün gönderilmeden önce dışarıdan anlaşılmayacak şekilde paketlenir ve kutulanır. Sizin dışınızda hiç kimse paket içeriğini bilemez.</span></div>
</div>
    Çok fazla bilgim yok kodlama kısmında genelde deneme yanılma yaparım hep, ben olsam 100px olan height değerlerini 100% olarak denerdim😂
  • 08-08-2023, 22:43:35
    #4
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    DBE
    DBE
    şunu bir dene hocam ayrıca bu şekilde style kullanımını tavsiye etmiyoruz hocam class olarak açıp ona göre ayarlarsan daha iyi olur diger arkadaşlarda yazmış hegith değeri içteki yazı olan yere verdiğiniz için dıştaki div içeriğin iç height ını 100px zannediyor bu yüzden genişletemiyor kendisini zaten onada 100px vermişsiniz

    <div style="width: 100%; background-color: #dff0d8;  display: flex; margin-bottom: 10px; padding:10px">

<div style="width: 10%; display: flex; justify-content: center; align-items: center;">

<img class="size-full wp-image-5499 aligncenter" src="check-mark.png" alt="Güvenli Gönderi Check Mark" width="50" height="50" /></div>

<div style="width: 90%;  padding-right: 10px; display: flex; flex-direction: column; justify-content: center;"><span style="color: #3c763d;"><strong>GİZLİ GÖNDERİ</strong></span><span style="color: #3c763d;">Bizim için, sizin güvenliğiniz ve gizliliğiniz çok önemlidir. Aldığınız her ürün gönderilmeden önce dışarıdan anlaşılmayacak şekilde paketlenir ve kutulanır. Sizin dışınızda hiç kimse paket içeriğini bilemez.</span></div>
</div>
  • 08-08-2023, 22:46:28
    #5
    zekikaynak
    zekikaynak
    DBE adlı üyeden alıntı: mesajı görüntüle
    şunu bir dene hocam ayrıca bu şekilde style kullanımını tavsiye etmiyoruz hocam class olarak açıp ona göre ayarlarsan daha iyi olur diger arkadaşlarda yazmış hegith değeri içteki yazı olan yere verdiğiniz için dıştaki div içeriğin iç height ını 100px zannediyor bu yüzden genişletemiyor kendisini zaten onada 100px vermişsiniz

    <div style="width: 100%; background-color: #dff0d8;  display: flex; margin-bottom: 10px; padding:10px">

<div style="width: 10%; display: flex; justify-content: center; align-items: center;">

<img class="size-full wp-image-5499 aligncenter" src="check-mark.png" alt="Güvenli Gönderi Check Mark" width="50" height="50" /></div>

<div style="width: 90%;  padding-right: 10px; display: flex; flex-direction: column; justify-content: center;"><span style="color: #3c763d;"><strong>GİZLİ GÖNDERİ</strong></span><span style="color: #3c763d;">Bizim için, sizin güvenliğiniz ve gizliliğiniz çok önemlidir. Aldığınız her ürün gönderilmeden önce dışarıdan anlaşılmayacak şekilde paketlenir ve kutulanır. Sizin dışınızda hiç kimse paket içeriğini bilemez.</span></div>
</div>
    bu yaaa eywallah hocam sağolasın...