0
Sitenin tarayıcı penceresinin genişliğine bağlı olarak üç farklı formata sahip olmasını istiyorum. Medya sorgularımdan ikisi doğru şekilde görüntüleniyor. Ancak üçüncü değil. Bazı nedenlerden dolayı, divların içindeki görüntüler yüksek oranda artar ve tüm metinleri div'dan çıkarır. Görüntüler hakkında değişmesi gereken tek şey genişlik. Tuhaf çünkü div'lerin genişliği ve kenar boşlukları iyi görünüyor, bu yüzden medya sorgusunun bir şeyler yaptığını biliyorum. Sadece div içindeki içerik doğru görüntülenmiyor. Bu, tarayıcı genişliğinin 1000 pikselin üzerindeyse gerçekleşir. Sitem neden medya sorgumu hatalı gösteriyor?
<!DOCTYPE>
<html>
<link rel="stylesheet" href="index.css">
<head>
<title>Resi</title>
</head>
<body>
<div id="nav">
<ul>
<strong><li style="font-size:26">RESI</li></strong>
<li>Rent</li>
<li>List Apartment</li>
<li>Contact</li>
<li>Help</li>
<li>Account</li>
<div id="logindiv">
<li id="signup">Sign In</li>
</div>
</ul>
</div>
<img src="http://www.ojc.edu/futurestudents/housingandfood/images/D13_Wunsch01.jpg" alt="college dorm" width = 960px height=470px>
<div id="search">
<h6 style="color:white" id="searchheader">Resi. Your alternative to dorming.</h6>
<input class="search-bar" type="text" name="search" placeholder="Search For Your School, Neighborhood, or City..."> <input type="button" value="Search">
</div>
<div class="reasons_1">
<img class="pics" src="http://scottsdalefurnishedapartment.com/wp-content/uploads/2013/10/specialedition.jpg">
<h3>Get more out of your dorm</h3>
<p>fdsg zfdga gzszv bzsgfA fdzsbgf zgszza gazff</p>
<a href="http://www.w3schools.com/tags/tag_a.asp"><p class="learn">Learn more ▶</p></a>
</div>
<div class="reasons_1">
<img class="pics" src="https://g.foolcdn.com/editorial/images/130138/college_large.jpg" >
<h3>Save money</h3>
<p>szhg sfzv hsgfhazf ghfghx fghx dxhfd fgsz gxsg zsfgsz</p>
<a href="http://www.w3schools.com/tags/tag_a.asp"><p class="learn">Learn more ▶</p></a>
</div>
<div class= "reasons_1">
<img class="pics" src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2012/7/16/1/CI-Dormify_dorm-room-teens-talking-on-sofa_s4x3.jpg.rend.hgtvcom.231.174.jpeg">
<h3>Freedom without the worry</h3>
<p>szfgzgzdf fg sdfgd gfgfgz g fzsg gfg zgfg zz df hj hj </p>
<a href="http://www.w3schools.com/tags/tag_a.asp"><p class="learn">Learn more ▶</p></a>
</div>
<div id="footer">
<h2>Terms and conditions</h2>
</div>
</body>
body {
width:100%;
margin: 0 auto;
background-color:#f7f7f7;
min-width: 636px;
}
div{
margin: 5px auto;
}
h1{
margin: 0px;
line-height: 70px;
}
#nav{
background-color: #00AAA0;
margin: 0 auto;
width: 100%;
height: 40;
}
li{
float: left;
font-family: sans-serif;
font-size: 16px;
padding: 0px 15px;
display: inline;
line-height: 40px;
height: 40px;
color: white;
}
ul{
margin: 0px;
margin-left: -50px
}
#signup{
float:right;
color: black;
height: 30px;
line-height: 30px;
}
#logindiv,#logindiv:hover{
float:right;
background-color:white;
margin: 5px 15px;
height: 30px;
width: 80px;
cursor: pointer;
}
img{
margin: 0px;
width: 100%;
height:
}
#search{
margin: 0 auto;
width: 600px;
height: 80px;
position: relative;
left: 0px;
bottom: 130px;
margin-bottom: -85px;
}
#search input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
margin-left: 5px;
}
input[type=button], input[type=button]:hover {
position:relative;
left:-6px;
bottom: 1px;
background-color:#FF7A5A;
color:white;
cursor: pointer;
height: 30px;
border: hidden;
width: 90px;
font-size: 16px;
margin-top: 5px;
}
.search-bar{
margin: 5px auto;
width: 500px;
height: 30px;
font-size: 16px;
}
#searchheader{
font-size: 30px;
}
h2,h6{
margin: 5px auto;
width:500px;
text-align: center;
font-family: sans-serif;
}
.reasons_1{
float: left;
background-color:white;
margin: 15px;
width: 31%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
@media only screen and (max-width: 1500px) and (min-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 2%;
width: 29%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
@media only screen and (max-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-left: 5%;
width: 40%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
@media only screen and (max-width: 700px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 14%;
margin-right: 14%;
width: 70%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
.pics{
height:190px;
width:100%;
}
h3{
font-family: sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}
p{
font-size: 16px;
line-height: 1.5;
font-family: Circular, Helvetica, Arial, sans-serif;
font-weight: 300;
margin-left: 10px;
margin-right: 10px;
}
#footer{
height: 250px;
background-color: #00AAA0;
color: white;
clear: both;
width: 100%
}
.learn{
position: absolute;
left: 165px;
top: 300px;
}
a{
color: #FF7A5A;
}
bu.
'Yüksekliğinizin' img'nizde bir değeri yoktur.Ayrıca SO'ya hoş geldiniz, genel olarak jsfiddle, codepen veya diğer çevrimiçi editörler gibi bir konuda yardımcı olabilmek için minimum düzeyde tekrarlanabilir bir örnek eklemek istersiniz. İnsanlara, sorununuzu çoğaltmak için eşyalarınızı kopyalayıp yapıştırmanın sıkıntısını kurtarmaya yardımcı olacaksınız. –