HTML Responsive yapılmıyor

Mert Pektaş

Hectopat
Katılım
21 Kasım 2021
Mesajlar
98
Daha fazla  
Cinsiyet
Erkek
Merhaba, yaptığım siteye responsive uygulamaya çalıştım fakat başaramadım benim ekran çözünürlüğümde güzel gözüküyor ama başka ekranlarda kayıyor. Yardım eder misiniz?
 
Muhtemelen media özelliği ile ayarladınız ve sadece font boyutlarını vesaire değiştirdiniz, flex yapısını kullanmanızı tavsiye ederim. Ek olarak kodları da atarsanız iyi olur.
 
533388 dedi:
Muhtemelen media özelliği ile ayarladınız ve sadece font boyutlarını vesaire değiştirdiniz, flex yapısını kullanmanızı tavsiye ederim. Ek olarak kodları da atarsanız iyi olur.
Genişletmek için tıkla...
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

        <script type="text/javascript" src="java/java.js"></script>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>


    <div id="uyegirisidiv">
        <a href="pages/uyegirisi.html"><img id="uyegirisi" src="images/uyegirisi.png">Kayıt ol</a>
    </div>

    <div id="sepetdiv">
        <a href="pages/sepet.html"><img id="sepet" src="images/sepet.png">Sepetim</a>
    </div>

    <div id="telefondiv">
        <a href="pages/telefon.html"><img id="telefon" src="images/telicon.png">İletişim</a>

    </div>


    <br>
    <div id="kutu">

        <a href="index.html"><img src="images/logo.png  "></a>

    </div>


    <!--kayan resim-->
    <div id="galeri" class="carousel slide" data-ride="carousel">
        <ul class="carousel-indicators">
            <li data-target="#galeri" data-slide-to="0" class="active"></li>
            <li data-target="#galeri" data-slide-to="1"></li>
        </ul>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/1.jpg" width="100%" height="100%">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/2.jpg" width="100%" height="100%">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#galeri" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#galeri" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    <!--kayan resim-->

    <div id="kitap1div">
        <a href="kitapages/kitap1.html"><img id="kitap1img" src="images/kitap1.png"></a>
        <p id="kitap1fiyat">25,00TL <del style="color: grey;">30,00TL</del></p>
        <button onclick="uyari()" id="kitap1button" type="button" style="background-color: orange; color: white;"><img width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    


    <div id="kitap2div">
        <a href=""><img id="kitap2img" src="images/kitap2.png"></a>
        <p id="kitap2fiyat">28,90TL <del style="color: grey;">34,00</del></p>
        <button onclick="uyari()" id="kitap2button" type="button" style="background-color: orange; color: white;"><img width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    

    <div id="kitap3div">
        <a href=""><img id="kitap3img" src="images/kitap3.png"></a>
        <p id="kitap3fiyat">39,00TL <del style="color: grey;">44,00</del></p>
        <button onclick="uyari()" id="kitap3button" type="button" style="background-color: orange; color: white;"><img width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    <div id="kitap4div">
        <a href=""><img id="kitap4img" src="images/kitap4.png"></a>
        <p id="kitap4fiyat">29,00TL <del style="color: grey;">34,00</del></p>
        <button onclick="uyari()" id="kitap4button" type="button" style="background-color: orange; color: white;"><img width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    

    <div id="kitap5div">
        <a href=""><img id="kitap5img" src="images/kitap5.png"></a>
        <p id="kitap5fiyat">32,00TL <del style="color: grey;">38,00</del></p>
        <button onclick="uyari()" id="kitap5button" type="button" style="background-color: orange; color: white;"><img width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    

    <br>
    <br>




</body>

</html>
CSS: 
#kutu {
    margin-top: -1%;
    margin-bottom: 1%;
}

#uyegirisi {
    width: 10%;
    height: 100%;
}

#sepet {
    width: 35%;
    height: 100%;
}

#telefon {
    width: 12%;
    height: 100%;
}

#uyegirisidiv {

    margin-top: 1%;
    margin-left: 70%;
}

#sepetdiv {
    margin-top: -3%;
    margin-left: 91%;
}

#telefondiv {
    margin-top: -3%;
    margin-left: 81%;
}

#kitap1div {
    margin-left: 10%;
    margin-top: 3%;

}

#kitap1img {
    width: 11%;
    height: 100%;

}

#kitap1fiyat {
    padding-left: 1%;
}

#kitap1button {
    border-radius: 16px;
    padding-left: 1%;
    padding-right: 2%;
}

#kitap2div {
    margin-left: 29%;
    margin-top: -20%;
}

#kitap2img {
    width: 14%;
    height: 100%;
}

#kitap2fiyat {
    padding-left: 2%;
}

#kitap2button {
    border-radius: 16px;
    padding-left: 2%;
    padding-right: 2%;
}

#kitap3div {
    margin-left: 48%;
    margin-top: -19%;
}

#kitap3img {
    width: 19%;
    height: 100%;
}

#kitap3fiyat {
    padding-left: 5%;
}

#kitap3button {
    border-radius: 16px;
    padding-left: 3%;
    padding-right: 3%;
}

#kitap4div {
    margin-left: 66%;
    margin-top: -19%;
}

#kitap4img {
    width: 28%;
    height: 100%;
}

#kitap4fiyat {
    padding-left: 6%;
}

#kitap4button {
    border-radius: 16px;
    padding-left: 4%;
    padding-right: 4%;
}

#kitap5div {
    margin-left: 84%;
    margin-top: -19%;
}

#kitap5img {
    width: 60%;
    height: 100%;
}

#kitap5fiyat {
    padding-left: 12%;
}

#kitap5button {
    border-radius: 16px;
    padding-left: 9%;
    padding-right: 9%;
}

533388 dedi:
Muhtemelen Media özelliği ile ayarladınız ve sadece font boyutlarını vesaire değiştirdiniz, Flex yapısını kullanmanızı tavsiye ederim. Ek olarak kodları da atarsanız iyi olur.
Genişletmek için tıkla...

Sitemin linki sizde nasıl gözüküyor ekran görüntüsü atabilir misiniz?
 
Media queries kullanmanız gerekir hocam bunun gibi :

Kod: 
@media screen and (max-width: 600px) {
  div {
   /* stiller*/
  }
}
 
Mobilde çok kötü gözüküyor. Muhtemelen Bootstrap kullanırken elementlere dahili CSS verirken yani <element style=""></element> yaparken bozdunuz.

b4r3k dedi:
Media queries kullanmanız gerekir hocam bunun gibi:

Kod: 
@media screen and (max-width: 600px) {
 div {
 /* stiller*/
 }
}
Genişletmek için tıkla...

Bildiğim kadarıyla Bootstrap varken kendimiz harici CSS kodlarken bozulmalar olabiliyor. Bunun yerine Bootstrap'in kendi özelliklerini kullanmak mantıklı olabilir.
 
b4r3k dedi:
Media queries kullanmanız gerekir hocam bunun gibi:

Kod: 
@media screen and (max-width: 600px) {
 div {
 /* stiller*/
 }
}
Genişletmek için tıkla...

Stillerin yüksekliğini veya genişliğini değiştirmeme gerek var mı?
Her çözünürlük için mi yazmam lazım.
 

Pardon Bootstrap kullandığınızı fark etmemişim. Bu arada Bootstrap olsa bile yine de siz Custom csseksilerinizi yazabilirsiniz bir sorun teşkil etmez.
 
b4r3k dedi:
Pardon Bootstrap kullandığınızı fark etmemişim. Bu arada Bootstrap olsa bile yine de siz Custom csseksilerinizi yazabilirsiniz bir sorun teşkil etmez.
Genişletmek için tıkla...

Ben eğer Bootstrap varsa kendi Flex yapısının kullanılmasını tercih ediyorum.

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
getbootstrap.com
 
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…