Why doesn't the browser see @media height?

Question

css

Made a website with 1 media min-width 1280. Up to 1280 mob. version, after 1280 pc version. On the main page, it was necessary to make it so that even with a window height of 800 and below, it would reduce the indent of the text block. Well I decided to add media (min-height:800px) and (max-height:900px). Does not work. Why?
Here is the css code

@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;
  }
}

Thanks in advance.
Here is a working example on fiddle jsfiddle.net/dimensi/56ga4r31 , but not working with media jsfiddle.net/dimensi/5xrLwxw0 and to be honest, I don’t understand at all why it doesn’t plow like the first option. I made both examples myself, just at first I decided to redo the main page from scratch, and then when everything worked out I decided to insert everything that I liked into the site.

Answer 1

You have .grey in your styles
, and .grey-index in the markup, but there is no gray style in the markup.