Internet Explorer media queries taking effect when they should not

Question

I have the following css:

@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}
.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
}

In Internet Explorer 11 (and probably other versions too), when the page is first loaded, the media query takes effect regardless of the viewport width. Only when the page is resized does it realize the media query should not be in effect.

Answer 1

Try putting the media-query after the normal class state. Also, you can try giving the non-media query a height as well.

.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
    height: auto;
}
@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}