Sami Sami - 3 months ago 17
CSS Question

media query max-width not working

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.

Answer

You have to write

min-width

Instead of min-device-width i think.