Check out my CSS code below:
@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;
}
Interestingly, in Internet Explorer 11 (and possibly other versions), the media query kicks in right when the page loads, regardless of the viewport width. It's only upon resizing the page that it recognizes the media query shouldn't be applied.