0
Я хочу, чтобы сайт имел три разных формата в зависимости от ширины окна браузера. Два из моих медиа-запросов отображаются правильно. Третий, однако, нет. По какой-то причине изображения внутри divs сильно увеличиваются и выталкивают весь текст из div. Единственное, что должно измениться в отношении изображений, это ширина. Это странно, потому что ширина и поля divs отображаются нормально, поэтому я знаю, что медиа-запрос что-то делает. Просто содержимое внутри divs отображается неправильно. Это происходит, когда браузер превышает 1000 пикселей в ширину.Почему мой сайт неправильно отображает мой медиа-запрос?
<!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>
Так что это HTML и вот устанавливаемому сотовые
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;
}
Кроме того, это мой первый сайт так что любой совет о том, как сделать его лучше будет оценен.
Ваша 'высота' не имеет значения для вашего' img' css. Кроме того, добро пожаловать в SO, как правило, вы хотите включить минимальный воспроизводимый пример для нас, чтобы помочь на чем-то вроде jsfiddle, codepen или другого онлайн-редактора. Вы получите дополнительную помощь, чтобы спасти людей от копирования или вставки ваших вещей где-то, чтобы воспроизвести вашу проблему. –