My @media query not working for display:none

[EkaitzHernandez]

Hi All!

Anybody knows why my map is not displaying again after resizing my window?  I am using the next media query to hide the map when the width is less than 767px.

@media (max-width: 767px) {
.map { display: none !important; }
}

The map is hiding but is not restoring again when I maximize the window. If I use { opacity: 0} it's working. Why display:none is creating an inconsistent state of the map?

I need help, thanks

[EkaitzHernandez]

I have found some help in gis.stackexchange.com

Display none "removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code." source

So I believe this is causing issues with the sizing of the map. I'm speculating, but I believe the resize event of the map when the window size is changed is being fired before the element is displayed again. If you are set on using display none you will have to find a way of firing the resize event after the map has been shown by the media query.

Here is a demo which shows it working with display none. It simply fires the resize event every second, do not do this, find another way! But this shows that the issue you are seeing is related to the collapsing and the expanding of the div:

http://jsfiddle.net/dave_wilton/N499E/8/

Another option is to simply hide your content by moving it off screen rather than using display none and collapsing it. This will probably have the affect you desired rather than the opacity which would just leave a big white space.

http://jsfiddle.net/dave_wilton/N499E/10/

Any suggestion to fix this problem?

Thanks!