IE not reading media query - css

Question

Does anyone know the proper use of media queries for IE? I tried using media queries in my page and in my call to the css file but i still do not see the media query being referenced.
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#logoBig{
display:none;
}
#logoSmall{
display:block !important;
}
.logo{
width:200px !important;
}
.fields{
margin: 32px 0 0 0px;
width:62% !important;
}
ul li .submenu{
display:none;
}
ul li:hover .submenu{
display:block;
}
Where is the best place to put this media query and what guidelines do i need to follow?
IE 11 and here is my meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

You are missing a closing bracket at the end of your query
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#logoBig{
display:none;
}
#logoSmall{
display:block !important;
}
.logo{
width:200px !important;
}
.fields{
margin: 32px 0 0 0px;
width:62% !important;
}
ul li .submenu{
display:none;
}
ul li:hover .submenu{
display:block;
}
}
but this would be an issue with all browsers, please update your html with your div's if this syntax error is not your issue.