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>
@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.
knk düzeltip atsana tam anlamadım sana zahmet
@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.