Filter to open 100% on mobile

Hi!

As always, thanks for the best theme put there.

I have a slight issue on my site. I posted this earlier and thought I solved it, but now it looks weird. Maybe you can advise.

I got the sidebars to open 100% on mobile and 30% on Desktop, as I want to. But now also desktop opens at 100% because it doesnt take the media into consideration. What am I doing wrong?

The filter Widget (sidebar) is set to open 100% or fullscreen on mobile, but it doesn’t. Any ideas? It did do it before I updated the shop page template slightly, just moving some columns. Now it refuses to go back to full screen?

Any ideas?

All the best,

Thanks,
Staffan

Hello,

Could you please once go to Dashboard > Theme Settings > Product archive > Widgets > there you can find the option of Shop sidebar widgets collapse > in that please check if you have selected the Disabled or not: https://snipboard.io/xFiUoZ.jpg

Because selecting there disabled, makes the Widgets under the Sidebar to appear open by default.

Best Regards

Hi 🙂

Sorry I was about unclear, I want the sidebar to open at 100% screen width on mobile and 30% on desktop 🙂

I got it to do it, but now it overwrites it in the CSS.

Any idea?

Hello,

Sorry to say but we still didn’t get your concern correctly. If possible could you please share a Video regarding your concern so that we can better understand and assist you accordingly.

Best Regards

Hi

No I understand I was a bit unclear, sorry.

Of you’re on mobile and open sidebar on shop page to bring up the filters. I want the sidebar to go 100% width of the screen.

But when I do this in the CSS it affects also all other drawers, like the main menu, Basket etc. That’s okay, but somehow it also affects desktop.

I got it to work, but now it doesn’t. If you inspect the page it ignores the device type and puts all to 100% width.

So basically I want the menu, Basket etc to extend 30% on desktop, and 100% on mobile.

The problem is based in that I cannot get the filter sidebar in shop to extend 100% of the device width, without also affecting the desktop version.

😀

Hello,

Thanks for the further clarification. We have now understood your concern.

Actually, firstly it seems that you have worked on global sidebar off-canvas class which is why it is taking effect on all sorts of sidebar menus including mobile menus too.

Now, the CSS that you have applied you haven’t shared with us so we don’t know exactly but as far as we have checked from inspect, wd-side-hidden was set as 100%. So, now the CSS that you have already applied, please comment that out and then try this way:

Firstly, please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.wd-side-hidden { width: 30% !important; }

And then under the Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile section, please try using the following Custom CSS:

.wd-side-hidden { width: 100% !important; }

After that check back your concern, hopefully it will work out for you.

If things still don’t get right somehow, then please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

Hi 😀

I have already tried this 😀

It doesnt work, it overrides and doesnt take the screen width into consideration. 😀

I provided credentials, please have a look 😀

All the best,
Staffan

Hello,

Firstly, please try to disable mod_security on your server. It seems to block Theme Settings “save” requests. You will need to contact your Hosting Provider for help in this regard.

After it’s resolved then mention us so that we can look after this concern because right now the changes under the Theme Settings aren’t taking place.

Best Regards

Hi again!

I have now tried this after disabling mod_security and I tried it on another server to just to be sure. Something is glitched here.

Whenever you add this to the mobile css it always affects also desktop, so if you add 30% for global and 100% for mobile, mobile overrides the 30%.

Something is really weird here. because this goes for all menus, mobile menu, cart etc. Actually the only menu to not be affected by this is filter – the one we want to change.

Can you try on your installation and see?

All the best,
Staffan

Hello,

We have applied the same CSS that we provided you on our Test Site and it was working fine according to the devices viewed i.e. 30% on Desktop and 100% on Mobile.

Here is the Shop page URL, you can check for yourself too: https://blackpearlspro.com/woodmart_support/shop/

Secondly, the class that is used under the CSS is the default class for the Off Canvas style which is why it is being applicable to overall Site’s off-canvas style including the Mobile Menu and Filter Sidebar both.

Best Regards

Hi!

What the hell, why is it acting differently, yours is bahving exactly like I want. But neither of my installations does 🤔

Really weird.

You have any other idea why this change on my page completely ignores the media type?

As soon as I add it in mobile, all goes to 100% , but weirdly, all except the filter. 🙁

Hello,

Could you please once take complete Backup of your Site first > deactivate all the third party Plugins on your Site remaining the Theme required ones activated > then remove any sort of Custom CSS for any viewport that you have applied in this regard on your Site and then mention us so that we can try out Custom CSS from scratch in this regard to rule out any other CSS or third party Plugin conflict concern.

Best Regards

[Author]

Posts