Johhan Johhan - 2 months ago 16
CSS Question

Media queries on internet explorer 11 reading only the first one

I'm trying to make a few @media to work on internet explorer 11

.content {
border-top: 1px solid #939393;
border-right: 1px solid #939393;
border-left: 1px solid #939393;
border-bottom: none;
margin-top: -60px;
position: relative;
width: 99.7%;
z-index: 97;
}

@media only screen and (max-width: 1330px) {
.content{
width: 99.6%;
z-index: 0;
}

@media only screen and (max-width: 1200px) {
.content{
margin-top: 0px;
width: 99.6%;
z-index: 0;
}

/* Tablet - 800px, 768px & 720px */
@media only screen and (max-width: 960px) {
.content{
margin-top: 0px;
width: 99.6%;
z-index: 0;
}
}


/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.content{
margin-top: 0px;
width: 99.45%;
z-index: 0;
}
}


/* Mobile - 320px */
@media only screen and (max-width: 479px) {
.content{
margin-top: 0px;
width: 100%;
z-index: 0;
}
}


Internet explorer 11 is only reading the first media query which is max-width: 1330px even if I reduce the screen width to a minimum.

This only happens with internet explorer. Firefox, chrome, opera, etc.. do work as intended and read the other media queries.

Am I missing something? How can I fix this?

Answer

You have a syntax error so IE only parses the first query.

Close your declarations.

@media only screen and (max-width: 1330px) {
    .content{
    width: 99.6%;
    z-index: 0;
    }
}

@media only screen and (max-width: 1200px) {
    .content{
    margin-top: 0px;
    width: 99.6%;
    z-index: 0;
   }
}