media query max-width not working

0
votes

To create responsive website i added media query to my css file. If i use media query with min-width its work fine. When i add max width to the same its not working. I don't know why this is happening.

@media only screen and (min-device-width : 768px) {
    #top-links{
    width: 96%;
    padding: 0 2%;
 }
#top-links #simplemenu {
    margin-left: 2%;
 }
#top-login{
    margin-right: 2%;
 }
}

This works fine.

      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#top-links{
    width: 96%;
    padding: 0 2%;
}
#top-links #simplemenu {
    margin-left: 2%;
}
#top-login{
    margin-right: 2%;
}
}

 @media all and (min-device-width : 768px) and (max-device-width : 1024px) {

  }

I tried the both but not working.some one help me out.

1
htmlcssmedia-queries

1 Answers

2
votes

You have to write 

min-width

Instead of min-device-width i think.