Сделал сайт, с 1
media min-width 1280. До 1280 моб. версия, после 1280 пк версия. На главной странице нужно было сделать, так, чтоб она еще при высоте окна 800 и ниже, уменьшал отступ текстового блока. Ну я решил добавить
media (min-height:800px) and (max-height:900px). Не работает. Почему?
Вот css код
@media only screen and (min-width: 1280px) and (min-height: 700px) {
.link-pc {
display: inline-block;
}
.link-mobile {
display: none;
}
.block-mobile {
display: none;
}
.block-pc {
display: block;
}
html,
body,
.container {
height: 100%;
}
.grey-index {
width: 100%;
background: #dbd8db;
background: -webkit-gradient(left top, right top, color-stop(0%, #dbd8db), color-stop(100%, #fff));
background: -webkit-linear-gradient(left, #dbd8db 0%, #fff 100%);
background: linear-gradient(to right, #dbd8db 0%, #fff 100%);
height: 60vh;
text-align: center;
}
.grey-index .text-under-logo {
font-family: 'MyriadProLight';
color: #4d4d4d;
letter-spacing: 0.5px;
font-size: 1.4em;
position: relative;
top: 17%;
}
.grey-index .logo-pc {
position: relative;
top: 13%;
}
.grey-index .logo-pc img {
max-width: 90%;
max-height: 90%;
}
.grey-index .logo-pc:after {
content: '';
background: #c1c1c1;
margin: 0 auto;
display: block;
height: 1px;
max-width: 14em;
position: relative;
top: 0.7em;
}
.grey-index .tagline {
font-size: 1.7em;
font-family: 'PT Sans';
font-weight: 400;
font-style: italic;
position: relative;
top: 8em;
}
.grey-index li {
display: inline-block;
margin-left: 5%;
}
.grey-index li:first-child {
margin-left: 0;
}
.red-index {
width: 100%;
background: #bf1e2e;
background: -webkit-gradient(left top, right top, color-stop(0%, #bf1e2e), color-stop(100%, #a61b29));
background: -webkit-linear-gradient(left, #bf1e2e 0%, #a61b29 100%);
background: linear-gradient(to right, #bf1e2e 0%, #a61b29 100%);
height: 40vh;
}
.red-index nav {
font-family: 'MyriadProBold';
text-transform: uppercase;
font-size: 2.5em;
letter-spacing: 7px;
position: relative;
top: 1em;
display: block;
width: 80%;
margin: 0 auto;
}
.red-index ul {
list-style-type: none;
margin: 0 auto;
display: block;
width: 50%;
text-align: center;
}
.red-index a {
color: #fff;
text-decoration: none;
}
.red-index li {
margin-top: 1em;
}
.red-index li:first-child {
margin: 0;
}
.red-index a:hover {
color: #000;
}
.col-1-2 {
width: 50%;
}
}
@media only screen and (min-width: 1280px) and (min-height: 900px) and (max-height: 950px) {
.grey .tagline {
top: 6.5em;
}
}
@media only screen and (min-width: 1280px) and (min-height: 870px) and (max-height: 900px) {
.grey .tagline {
top: 6em;
}
}
@media only screen and (min-width: 1280px) and (min-height: 830px) and (max-height: 870px) {
.grey .tagline {
top: 5.5em;
}
}
@media only screen and (min-width: 1280px) and (min-height: 800px) and (max-height: 830px) {
.grey .tagline {
top: 4.5em;
}
}
@media only screen and (min-width: 1280px) and (min-height: 760px) and (max-height: 800px) {
.grey .tagline {
top: 4em;
}
}
@media only screen and (min-width: 1280px) and (min-height: 730px) and (max-height: 760px) {
.grey .tagline {
top: 3.5em;
}
}
@media only screen and (min-width: 1280px) and (min-height: 700px) and (max-height: 730px) {
.grey .tagline {
top: 3em;
}
}
Заранее спасибо.
Вот рабочий пример на фиддл
jsfiddle.net/dimensi/56ga4r31, а вот не рабочий с media
jsfiddle.net/dimensi/5xrLwxw0 и честно говоря, я вообще не пойму че он не пашет, как первый вариант. Оба примера сделал я сам, просто сначала я решил переделать с нуля главную страницу, а потом когда все устроило решил вставить все что понравилось в сайт.
