CODEWITHSUNDEEP
htmlcssmedia-queries
Andrei Bularca
Andrei Bularca

Reputation: 5

@media query not applied within a range

I want to make my ul height variable, so when I have screens with width between 600px and 768px to have a certain height(the ul) like for example 390px, and when the height is between 768 and 900 to have another height(the ul) like 420px an so on so forth.

I don't understand why my media query is not working.

Here is the code:

HTML:

<div id="meniu">
        <div id="cat" >
            <div class="catico">
               <img src="img/Categories.png"/>
            </div>
            <div class="cattext">
               Categories:
            </div>
        </div>
        <ul> 

            <li><div class="cerculet"></div><a href="#" class="dece">All categories </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Everything </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Nature </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Animals </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">popular </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Traveling </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Companies </a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Sports</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Food</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Restaurants</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Hotels</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Social</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Business</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Technology</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Music</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Art</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Personal</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Films</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Books</a> </li>
            <li><div class="cerculet"></div><a href="#" class="dece">Products</a> </li>



        </ul>         

    </div>

And here is the CSS:

 #meniu{
 position:fixed;
 top:9.5em;
 height:420px;
 width:140px;
 float:left;
 line-height:30px;
 font-size:1.15em;
 margin-left:0px;
 padding-right:75px;
 padding-left:30px;
 text-decoration:none;}

#meniu ul{
 font-size:1.2em;
  margin-left:0px;
  position:relative;
  right:30px;
  height:390px;
  padding-top:5px;
  margin-top:10px;
  overflow-y:scroll;
  width:150px;
  color:#797979;
  list-style-type:none;
  background-color:#F8FDF8;}

#cat{
 color:#08AB08;
 font-size:1.3em;
 width:190px;
 height:30px;
 float:left;
 right:30px;
 position:relative;
 text-align:center;
 padding-top:5px;
 background-color:#F8FDF8;}

.cerculet{
 border-radius:100%;
 color:#00C800;
 height:10px;
 width:10px;
 background-color:#00A800;
 position:relative;
 float:left;
 right:22px;
 margin-right:-10px;
 top:10px;}

.catico{
 float:left;
 position:relative;
 left:12px;
 top:3px;}

 .cattext{
 position:relative;
 float:left;
 left:15px;
 font-size:1em;}


@media screen and(max-height:767px){
#meniu ul{
height:390px;}
}
@media (min-height:768px)and(max-height:899){
#meniu ul{
height:450px;}
}

Upvotes: 0

Views: 108

Answers (3)

dippas
dippas

Reputation: 60543

you need to switch the order of your queries, because you are using non-mobile first approach, which means the last query will override the first one.

Plus you are mising a px in one of the queries and need to give space between and

So this:

@media screen and(max-height:767px){
  #meniu ul{
   height:390px;
  }
}
@media (min-height:768px) and (max-height:899){
  #meniu ul{
   height:450px;
  }
}

should be this:

@media (min-height:768px) and (max-height:899px){
  #meniu ul{
    height:390px;
  }
}
@media screen and (max-height:767px) {
  #meniu ul{
    height:450px;
  }
}

Upvotes: 3

E.Agolli
E.Agolli

Reputation: 550

You can try this:

@media only screen and (max-device-width: 899px) and (min-device-width: 768px)
    {
        ul
        {
            height: 390px;
        }
    }

@media only screen and (max-device-height: 760px) and (min-device-height: 600px)
    {
        ul
        {
            height: 420px;
        }
    }

Upvotes: 0

Rohit Agre
Rohit Agre

Reputation: 1528

Make sure you add the following meta tag to the <head> section

<meta name="viewport" content="width=device-width, initial-scale=1">

This is mandatory for using @media queries

Upvotes: -1

Related Questions