Question

Hi I am new to css media queries so please bear with me, but essentially I am trying to hide an element if the screen size is less then 940px wide using css instead of javascript.

For some reason this is hiding the element at all sizes, i can’t seem to find a typo or anything, does it not work with display none?

@media all and (min-width: 940px) {
#smallDistrictMap
{
    display:none;
}
}

I noticed it is working if the screen size starts smaller then 940px but not if the screen starts at a larger size…

also tried adding max-width

@media all and (max-width: 2000) and (min-width: 940px) {
#smallDistrictMap
{
    display:none;
}
}

but this is having no effect for some reason. aaaah

Answer 1

To hide the element if the screen is less than 940px – means that 940px is the MAX, not the MIN:

@media all and (max-width: 940px) {
#smallDistrictMap
    {
        display:none;
    }
}