CODEWITHSUNDEEP
htmlcss
None
None

Reputation: 5670

Media Query not working for min-height

I have an Image in my page. And I want it to have different height when screen height changes. My code is like this

@media (min-height:  600px) {

    .focuspoint {
        min-height: 385px !important;
    }
      .focuspoint img{
        min-height: 385px !important;
    }
}

@media (min-height: 700px) {

    .focuspoint {
        min-height: 490px !important;
    }
       .focuspoint img{
              min-height: 490px !important;

    }
}

@media  (min-height: 800px) {

    .focuspoint {
        min-height: 450px !important;
    }
      .focuspoint img{
        min-height: 450px !important;
    }
}


@media (min-height: 900px) {

    .focuspoint {
        min-height: 685px !important;
    }
      .focuspoint img{
        min-height: 685px !important;
    }
}

@media  (min-height: 1050px) {

    .focuspoint {
        min-height: 985px !important;
    }
      .focuspoint img{
      min-height: 985px !important;
    }
}


@media (min-height: 1200px) {

    .focuspoint {
        min-height: 985px !important;
    }
     .focuspoint img{
        min-height: 985px !important;
    }
}
<li class="panel activePage">
  <div class="focuspoint"  style="width: 100%; height: 100%;">
    <img src="/media/41661/1600x1070.jpg" class="img-responsive" >
  </div>

</li>

Every thing looks okay to me, But when I tested the media query is not taken by browser. Can any one please point out what I am doing wrong here?

Upvotes: 2

Views: 5488

Answers (1)

9997
9997

Reputation: 1357

You need to reverse the order of your media queries, and also add both "min-height" and "max-height" to ensure that it renders correctly.

@media (min-height: 1200px) {

    .focuspoint {
        min-height: 985px !important;
    }
     .focuspoint img{
        min-height: 985px !important;
    }
}


@media  (min-height: 1050px) and (max-height: 1199px) {

    .focuspoint {
        min-height: 985px !important;
    }
      .focuspoint img{
      min-height: 985px !important;
    }
}

@media (min-height: 900px) and (max-height: 1049px) {

    .focuspoint {
        min-height: 685px !important;
    }
      .focuspoint img{
        min-height: 685px !important;
    }
}

@media  (min-height: 800px) and (max-height: 899px) {

    .focuspoint {
        min-height: 450px !important;
    }
      .focuspoint img{
        min-height: 450px !important;
    }
}

@media (min-height: 700px) and (max-height: 799px) {

    .focuspoint {
        min-height: 490px !important;
    }
       .focuspoint img{
              min-height: 490px !important;

    }
}


@media (min-height:  600px) and (max-height: 699px) {

    .focuspoint {
        min-height: 385px !important;
    }
      .focuspoint img{
        min-height: 385px !important;
    }
}

Upvotes: 4

Related Questions