0
Kayıt Ol

CSS Konusunda Yardımcı Olabilirmisiniz?

4

●

88

  • 06-01-2022, 19:53:42
    #1
    Anarchosa
    Anarchosa
    Mobilde Bu Şekilde görünmesini istiyorum


    Alıntı
    <!DOCTYPE html>
    <html>
    <style>
    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    font-family: Arial;
    }

    .header {
    text-align: center;
    padding: 32px;
    }

    .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    }

    /* Create four equal columns that sits next to each other */
    .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
    }

    .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    }

    /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
    .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
    }
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
    .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    }
    }
    </style>
    <body>

    <!-- Header -->
    <div class="header">
    <h1>Responsive Image Grid</h1>
    <p>Resize the browser window to see the responsive effect.</p>
    </div>

    <!-- Photo Grid -->
    <div class="row">
    <div class="column">
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">
    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b> <font color="red">5.25</font><br></b>
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">

    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b> <font color="red">5.25</font><br></b>
    </div>
    <div class="column">
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">

    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b> <font color="red">5.25</font><br></b>
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">
    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b> <font color="red">5.25</font></b>
    </div>
    <div class="column">
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">

    <br>
    <font color="black" bold >Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b> <font color="red">5.25</font><br></b>
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">
    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b><font color="red">5.25</font></b>
    </div>
    <div class="column">
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">
    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <b> <font color="red">5.25</font><br></b>
    <img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">
    <br>
    <font color="black">Aciklama</font><br>
    <font color="black">Aciklama</font><br>
    <font color="red">5.25</font></b>
    </div>
    </div>

    </body>
    </html>

    kodlarım bu şekilde mobil uyumlulukta sadece 2 tane göstermek istiyorum.masaüstünde zaten normal açılıyor bu konuda yardımcı olabilirmisiniz? ancak telefonda böyle açılıyor


  • 06-01-2022, 20:04:12
    #2
    angelicmoon
    angelicmoon
    Üyeliği durduruldu
    Hocam kurduğunuz yapı yanlış. Liste şeklinde olduğu için ul li şeklinde sıralamanız gerekir. Size baştan yapıp atıyorum. Biraz bekleteceğim.
  • 06-01-2022, 20:05:21
    #3
    thehyades
    thehyades
    Merhaba, 600px mediascreen kısmını bu kodlar ile degiştirip deneyebilir misiniz?
    @media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 50%;
max-width: 100%;
}
.row{
display:flex;
justify-content:center;
}
}
  • 06-01-2022, 20:10:04
    #4
    ahmetkucukonder
    ahmetkucukonder
    Kodlarınızda basit bir etiket hatası dışında sorun görünmüyor o da mobil görünümü etkilemez, mobil görünümü geliştirici aracını kullanarak test edin F12 > Ctrl + Shift + M ayrıca shift + F5 yaparak önbelleği temizlemeyi unutmayın. Mobil cihazdan giriyorsanız aynı şekilde çerezleri temizleyin.
    Konuyu bootstrap kategorisine açmışsınız, eğer bootstrap kullanıyorsanız column yerine col-6 col-md-3 classlarını vermeniz yeterli olacaktır.
  • 06-01-2022, 23:29:39
    #5
    Ahmed
    Ahmed
    Mobil uyum sorununu çözmek için öncelikle head tagleri arasına bu kodu girin.
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    Ürünleri mobilde yan yana 2 adet olacak şekilde görüntülemek için bu kodu style tagleri arasına girin.
    .urun {float: left; width: 50%; padding: 10px;}
    Ürünlerinizi class'ı urun olan divler içine alın.
    Örnek:
    <div class="urun"><img src="https://i.hizliresim.com/n5z8wv8.jpg" style="width:100%">
<br>
<font color="black">Aciklama</font><br>
<font color="black">Aciklama</font><br>
<b> <font color="red">5.25</font><br></b></div>
    İstediğiniz tam anlamıyla olacaktır.
    İyi forumlar.

    (R10.net meta tagını kod olarak paylaştığımda bozduğu için düzenlenmiştir.)