Eliminating empty space with hidden html in CSS

Question

I am trying to hide certain content with visibility based on media query. It works, but it creates empty scrollable space like the containers are still there. Is there a way to eliminate this?

When the screen is in "Desktop" mode - it has all the mobile empty space below and vice versa when in "Mobile".

http://oberers.com/mt2.html

Answer 1

Change div.desktop

visibility: hidden 

to

display: none

Reference: display none