css media styles does not work after browser window was refreshed

Question

#wrap {
    background: white;
    margin: 20px 15px;
    padding: 10px;  
}
@media screen and (max-width: 600px) {
    #wrap {
        margin: 0;
        padding: 0
    }
}

These styles seems to be working if I open new browser window and try to resize it. But if I refresh windows once then @media does not work. Then I need to close the browser and open it againe to open the same site to re-enable @media styles. What is going on here?

Answer 1

@media only screen and (max-width: 600px) {
    #wrap {
        margin: 0;
        padding: 0
    }
}

I find it works best when you have the word "ONLY" in the media query. Heres an example of the bootstrap media queries.

https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

If that doesnt work try a hard refresh to clear your browser cache.