Why doesn't @media work correctly?

Question

css

Here is the code on codepen . If you shrink the browser to a media query that sets a green background and click a button to hide the square, zooming in to a red background does not return the square. Why? If you look in the debugger, you can see that display: none and if you manually set it to display: block, then the square becomes visible again. It turns out that the media query does not work, but what about the red background color...

Answer 1

Works out. It's just that when you hide via element.style, it takes precedence over style.