error while using @media

Question

This is the page:

http://www.dinamicaimoveis.com.br/novo/admin

the css that’s the one:

    ...
media screen and (min-width: 0px) and (max-width:480px)  {

.sessoes {  
    width:100%;
}

.menu {
    background:none;
}

  .menus {
      width:100%;
  }

  .menusItens {
      display:inline;
   }

   ul.listaTopo {
      display:block;
   }

   ul li.listaLi {
      clear:both;
      display:inline-block;
   }

   ul li.listaLi a{
      display:inline-block;
   }

    .final, .base {
        width:100%;
        font-size:10px;
    }

.final {
    height:80px;
}

    .baseEsquerda, .baseDireita {
        width:45%;
    }

    .finalEsquerda, .finalDireita {
        width:95%;
    }

}

@media screen and (min-width: 0px) and (max-width:320px)  {  

  .formLogin {
     width: 300px;
  }

}
@media screen and (min-width: 321px) and (max-width:480px)  {

  .formLogin {
     width: 430px;
  }

}

It’s the only thing working @media in 320px.

That is, if I put everything inside the block

media screen and (min-width: 0px) and (max-width:320px)  {
}

There’s a lot there that serves so much for resolution of 320px how much to 480px as an example:

.sessoes {  
    width:100%;
}

But if I do

@media screen and (min-width: 0px) and (max-width:480px)  {

.sessoes {  
    width:100%;
}
...
}

@media screen and (min-width: 0px) and (max-width:320px)  {  
  .formLogin {
     width: 300px;
  }
 ... 
}

@media screen and (min-width: 321px) and (max-width:480px)  {
  .formLogin {
     width: 430px;
  }
 ... 
}

Then in any resolution (including that of 320px that was working) it behaves as if not inside a block @media in any resolution.

Where am I going wrong?

I noticed that the error only happens from the header down.

Answer 1

1) You don’t need a "min-width: 0px" if you are already saying that your "max-width" is 320px. The CSS will serve for any device you have until 320px.

2) You have a media query that goes from 320px a 480px, therefore, whatever is inside that query will overwrite whatever is inside your query with max-width de 320px, since both have the same value. The correct thing is that you make a query of:

@media screen and (min-width: 321px) and (max-width:480px)  {
  {...}
}