No sidebars in tablet and mobile widths in woocommerce shop pages

Hi there,

Just to confirm, you want this for all shop archives correct?

If so this should work:

@media (max-width: 768px) {
    body.post-type-archive-product #left-sidebar {
        display: none;
    }
}

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

It does not work to me, I dont know why.

The web is https://mariamandarinaonline.es and a shop page, for example, https://mariamandarinaonline.es/categoria-producto/alimentacion/

Thank you

Hi there,

try this:

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

Hi, it works, but it remove the sidebar and it leaves an ugly empty space.

I would like to have no sidebars, as in mobile version.

Thank you in advance

The CSS i provided here will only apply to Tablet and Mobile - so there should be NO empty space to the side. Can you add the CSS back in and we can take a look at what the issue is

Done. I have put 1100 px of max-width.

Aah ok - if you want it to be removed at a larger width then use this CSS:

@media (max-width: 1100px) {
    .woocommerce.archive #left-sidebar {
        display: none;
    }
    #primary {
        width: 100%;
        left: unset;
    }
}

Great!! Thanks a lot. That code is perfect for me.

You're welcome