HTML Responsive yapılmıyor

Mert Pektaş · 31 Aralık 2023

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?

533388 · 31 Aralık 2023

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.

Mert Pektaş · 31 Aralık 2023

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.

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/[email protected]/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/[email protected]/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Document

Sitemin linki sizde nasıl gözüküyor ekran görüntüsü atabilir misiniz?

ParvizAzeroglu · 31 Aralık 2023

Media queries kullanmanız gerekir hocam bunun gibi :

Kod:

@media screen and (max-width: 600px) {
  div {
   /* stiller*/
  }
}

533388 · 31 Aralık 2023

Mobilde çok kötü gözüküyor. Muhtemelen Bootstrap kullanırken elementlere dahili CSS verirken yani <element style=""></element> yaparken bozdunuz.

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

Kod:

@media screen and (max-width: 600px) { div { /* stiller*/ } }

Bildiğim kadarıyla Bootstrap varken kendimiz harici CSS kodlarken bozulmalar olabiliyor. Bunun yerine Bootstrap'in kendi özelliklerini kullanmak mantıklı olabilir.

Mert Pektaş · 31 Aralık 2023

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

Kod:

@media screen and (max-width: 600px) { div { /* stiller*/ } }

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.

ParvizAzeroglu · 31 Aralık 2023

533388 dedi:
Mobilde çok kötü gözüküyor. Muhtemelen Bootstrap kullanırken elementlere dahili CSS verirken yani <element style=""></element> yaparken bozdunuz.

Bildiğim kadarıyla Bootstrap varken kendimiz harici CSS kodlarken bozulmalar olabiliyor. Bunun yerine Bootstrap'in kendi özelliklerini kullanmak mantıklı olabilir.

Pardon Bootstrap kullandığınızı fark etmemişim. Bu arada Bootstrap olsa bile yine de siz Custom csseksilerinizi yazabilirsiniz bir sorun teşkil etmez.

533388 · 31 Aralık 2023

ParvizAzeroglu 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.

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

ParvizAzeroglu · 31 Aralık 2023

Mert Pektaş dedi:
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.

Yok gerek yok ben sadece widthi 1000px üstü ve altı için yaziyorum.

Burada detaylı anlatımı var Responsive Web Design Media Queries

533388 · 31 Aralık 2023

Mert Pektaş dedi:
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.

Burada boyutlar var.

Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there

stackoverflow.com

HTML Responsive yapılmıyor

Ayrıntılı düzenleme

Mert Pektaş

Decapat

533388

Hectopat

Mert Pektaş

Decapat

ParvizAzeroglu

Picopat

533388

Hectopat

Mert Pektaş

Decapat

ParvizAzeroglu

Picopat

533388

Hectopat

Flex

ParvizAzeroglu

Picopat

533388

Hectopat

Media Queries: How to target desktop, tablet, and mobile?

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz