No sidebars in tablet and mobile widths in woocommerce shop pages

[Fernando Díaz Gascón]

Hello,
With the woocoomerce addon you can configure in the shop page if you want this with sidebars or not. I would like to have left sidebar for desktop and no sidebars for tablet and mobile. Is it possible?

Thank you

[Leo]

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/

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

[Fernando Díaz Gascón]

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

[David]

Hi there,

try this:

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

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

[Fernando Díaz Gascón]

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

[David]

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

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

[Fernando Díaz Gascón]

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

[David]

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;
    }
}

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

[Fernando Díaz Gascón]

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

[David]

You’re welcome

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

[Author]

Posts