muratt25

@media kullanımında hata yaptım sanırım. Sorun nerede?

Aşağıdaki kodda @media çalışmıyor. Nerede hata yapmışım?

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        @media screen and (max-width:700px) {



            #bosluk {

                width: 50%;

            }



        }


        * {

            box-sizing: border-box;

        }



        #resim {





            border: solid 1px #ccc;

        }



        #resim:hover {

            border: solid 1px #777;

            cursor: pointer;

        }



        #bosluk {

            width: 25%;

            float: left;

            padding-right: 5px;

            padding-bottom: 5px;

        }



        #resim img {

            width: 100%;

            height: 200px;

            object-fit: cover;



        }



        #about {

            padding: 10px;

            text-align: center;

        }



    </style>

</head>



<body>



    <div class="gallery">

        <div id="bosluk">

            <div id="resim">

                <a href="img/1.jpeg"><img src="img/1.jpeg" alt=""></a>

                <div id="about">Destription about image information</div>

            </div>

        </div>

        <div id="bosluk">

            <div id="resim">

                <a href="img/2.jpeg"><img src="img/2.jpeg" alt=""></a>

                <div id="about">Destription about image information</div>

            </div>

        </div>



        <div id="bosluk">

            <div id="resim">

                <a href="img/4.jpeg"><img src="img/4.jpeg" alt=""></a>

                <div id="about">Destription about image information</div>

            </div>

        </div>

        <div id="bosluk">

            <div id="resim">

                <a href="img/5.jpeg"><img src="img/5.jpeg" alt=""></a>

                <div id="about">Destription about image information</div>

            </div>

        </div>

        <div id="bosluk">

            <div id="resim">

                <a href="img/6.jpeg"><img src="img/6.jpeg" alt=""></a>

                <div id="about">Destription about image information</div>

            </div>

        </div>

        <div id="bosluk">

            <div id="resim">

                <a href="img/3.jpeg"><img src="img/3.jpeg" alt=""></a>

                <div id="about">Destription about image information</div>

            </div>

        </div>

    </div>

</body>



</html>
Adv
  1. @media kısmı, #bosluk tan sonra yani ondan daha aşağıda olmalıdır.  Aslında sayfa 700px in altına düştüğünde, media querry çalışıyor bunu incele den görebilirsiniz ama width:50%; nin üzeri çizik. Çünkü css kısmında #bosluk bölümü media dan aşağıda yer aldığı için media nın css kodlarını her halükarda eziyor. Genişlik hep #bosluk ta verilen 25% olarak işlem görüyor. Media querry i #bosluk sonrasına alırsanız sayfa istediğiniz gibi responsive olacaktır.

  2. @media screen and (max-width:700px) {
    
    
    
    #bosluk {
    
    width: 50%;
    
    }
    
    
    
    }

    Yukarıdaki @media kodu, sizde en başta yer alıyor. Oysa aşağıdaki kod, @media dan önce olmalı:

    #bosluk {
    
    width: 25%;
    
    float: left;
    
    padding-right: 5px;
    
    padding-bottom: 5px;
    
    }

    Yani @media #bosluk tan sonra yazılı olacak ki ezilmesin, kod akışı sayfada aşağıya doğru çalışıyor.