Filter display isn’t showing well since last update

Dear,

Please check the link in private.
Go on the shop page and filter with some widgets

You’ll see that on mobile the display of the attributes isn’t showing well since the last release.

Thanks
Simon

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.website-wrapper .wd-active-filters {
	flex-wrap: wrap;
}

.website-wrapper .wd-active-filters .widget_layered_nav_filters {
    overflow-x: unset;
    direction: unset;
}

.website-wrapper .wd-active-filters .widget_layered_nav_filters ul {
    flex-wrap: wrap;
    white-space: unset;
    direction: unset;
}

Kind Regards

Will this be fixed in next release? Thanks

It is not something that should be fixed since it was made for mobile optimization. You have a “Remove” button that takes half of the screen.

Kind Regards

Yes it has to be fixed because this is not a normal behavior, it doesn’t matter that “it was made for mobile”, it doesn’t display well on the screen when we set multiple filters.

Regarding the “remove” button, this is the default French translation. I didn’t use any special translation, this is the DEFAULT translation so you have to consider this that in French the translation takes indeed half of the screen. So what? The filters should be able to display properly on separate rows “inline” one after the other.

Hello,

For your situation, you can use a simple CSS code to fix this. But in most cases, it looks much cleaner in one row and gives more space to the products section. Here is an example https://gyazo.com/0ef4faaca10362e936e61ba452a32b03

Kind Regards

In your example you didn’t try to use a Swatch color in those filters. Try it and you will see (like in my example previously given).

It looks like your screenshot is similar to ours. The difference is that you have a wider “Clear” button and you see the scroll bar when you try to scroll the filters.

Kind Regards

[Author]

Posts