Remove / Hide sidebar on low resolution

Heya!

I’d like to hide the sidebar on mobile devices. So as soon as the display width changes below,let’s say 1200px I’d like the entire sidebar container to disappear. I tried soething like

@media (max-width: 1200px) {
    #sidebar {
        display:none !important;
    }

But it doesn’t work. Any ideas?

So the solution was simple. In perth it’s no t#sidebar but #secondary

@media (max-width: 1200px) {
#secondary { display:none !important; }
.content-area { width: 100% !important; }
}

works like a charm.

Hello there,

Thank you for reaching out to us here.

Try this code, please:


@media (max-width: 1200px) {
  #secondary {
    display:none !important;
  }
}  

Regards,
Kharis