Hide sidebar on tablet & mobile

Hi there,

Try this CSS:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

Hi Leo,

It works, however, on tablet the main content take 75% width and not 100%.....

Hi there,

that should not happen - can you provide a link to your site so we can see what the issue is?

You can edit your original topic and use the Site URL field to share your link privately.

Hi there this happens on our site too. I use the below CSS to hide the sidebar below the tablet width of 1024px:

@media (max-width: 1024px) {
    #left-sidebar {
        display: none;
    }
}

It hides the sidebar but the main content of the shop page still only occupies 75% of the screen. See below example page, shrink the browser and you can see there is a point at which the side bar disappears but the products do not expand fully to 100% until the page gets a bit smaller.

https://www.supereight.net/shop/

Hi there,

Try this:

@media (max-width: 1024px) {
    #left-sidebar {
        display: none;
    }

    #primary {
        width: 100%;
        float: none;
        left: 0;
    }

    .separate-containers .site-main {
        margin-left: 0;
    }
}

OK great that sorted it!

thanks

You're welcome