Magento 2 hide sidebar only in category view for mobile

Question

I am trying to hide sidebar in my magento 2 instance with css only for mobile view and only in category view pages.

I tried:

@media (max-width: 767px) {
    .category-view .sidebar .sidebar-main {
        display: none;
    }

or

@media (max-width: 767px) {
        .category .sidebar .sidebar-main {
            display: none;
        }

but these don't work. Sidebar is still there

The only thing it works is :

@media (max-width: 767px) {
        .sidebar .sidebar-main {
            display: none;
        }

but this remove sidebar for whole site.

And I only need to remove the sidebar only in category pages.

Any ideas please?

Is there a way to define classes for define category page sidebar only?

Answer 1

You need to use class catalog-category-view instead of category because there is no such class category on category page!

Your code should be:

@media (max-width: 767px) {
    .catalog-category-view .sidebar .sidebar-main {
        display: none;
}