Woocommerce sidebar issues on mobile

[GTS75]

I’m using a sidebar menu on my woocommerce category pages and it looks great on desktop, but when it’s displayed on a phone it’s shown down below all of the page content and it’s crushed against one side of the screen, definitely not optimized for mobile. Is it possible to have the menu display normally on phones? Or can I limit the sidebar menu to only display on desktops?

Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

This is caused by your custom CSS:

aside.sidebar.col-sm-3 {
    width: 20%;
}

You will want to handle that for mobile also, so this example will help you:

@media only screen and (max-width: 767px) {
aside.sidebar.col-sm-3 {
    width: 100% !important;
}
}

[GTS75]

I added that 2nd code and nothing changed. Does that 2nd code replace the initial code I had in there?

[GTS75]

I added that 2nd code and nothing changed. Does that 2nd code replace the initial code I had in there?

Is it possible to not display the woocommerce sidebar menus on mobile?

[David Martin – Support]

No it’s not to replace, it’s to go with it.

It will make the sidebar fullwidth again on mobile, overriding the initial custom css you have.

[GTS75]

great, thank you.

[Rui Guerreiro – SUPPORT]

No problem. Thanks David.

-Rui