Jump to content

Universal Plugin Filter Looks Bad on Mobile - Seeking CSS and/or Javascript Solutions

Recommended Posts

A client of mine recently installed the Universal Filter plugin on their website, and although the functionality is working so far, I'm not thrilled with the visual appearance of it. For context, this is a website where people can find coaches for a large variety of personal and/or professional issues, and considering there are a lot of categories to choose from, the filtering capability is quite important. The page in question is linked above, or you can also find it here: https://www.nuumani.com/coach-mentor-directory 

I did some CSS work to change the desktop appearance and it's worked so far for our purposes, but I'm struggling to make it look at all functional on mobile. Honestly, considering how common this is as a third-party plugin, I'm a bit surprised that I haven't seen other posts about this exact issue.

Initially, the plugin on mobile had a completely transparent background, which I fixed using CSS to force it to be white. However this means that you now can't see anything that is going on behind the filter at all, until you close it. This is terrible user experience for a number of reasons, the most obvious being a) it's hard to tell if the filter is changing its selections while you are editing the settings and b) there is no "Select" option, and the only way to close the filter is to press the X button at the bottom of it on mobile. So if you can't tell if the filter is changing its options, then you probably wouldn't want to close the filter yet.

I guess the transparent window was meant to alleviate the concerns of not being able to see what's going on behind it, but that makes it borderline unreadable. However when you change it to white, it's impossible to see what's going on behind it. Has anyone dealt with this and come up with a satisfying solution?

I thought some possible solutions would be to make the window smaller using css, to show that changes are being made upon selection. Another possible solution would be to edit the Javascript so that the filter closes automatically upon selection, but that may also be more complicated than it's worth. Curious if anyone has been able to change the functionality and can provide examples of it working well?

 

Attached below are screenshots of the filter before and after I used css to turn the background white for mobile. 

Screenshot 2024-06-28 at 3.31.43 PM.png

Screenshot 2024-06-28 at 3.33.07 PM.png

Link to comment
  • Replies 1
  • Views 245
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You can use CSS code like this to make Filter Panel smaller on mobile

@media screen and (max-width:767px) {
.custom-filter-container.use-mobile-panel.custom-filter-uid-0 .customFiltersWrapper:not(.cf-top-section-filters) {
    width: 60% !important;
    right: unset !important;
    min-width: unset !important;
}
}

image.png.3c7f6a782d2d95f3dc3c2e9136ad6dba.png

To make panel close on select an option on dropdown on Mobile, you can find this line in Filter code and change false to true

image.thumb.png.0cf49f093118bf649403661fade896ec.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.