CSS help for Universal Filter on Product Page

Site URL: https://activestatedesigns.squarespace.com/shop

Hello there,

I am very close to going live for my Squarespace site.  However, I cannot get the filter I purchased to look good.  Can someone help with the CSS please?  I've tried, but can't seem to dissect it to get it to look right.  The search on right should be wider and show it's a text input field.  Then the dropdowns the width isn't right and there's some line breaks because width needs to be fixed.  Otherwise I think it's close!

My site is here: https://activestatedesigns.squarespace.com/shop
Password: SiteTest

Filter plugin: Universal Filter

Thanks in advance!
Lorne

3 hours ago, Lorne17 said:

Site URL: https://activestatedesigns.squarespace.com/shop

Hello there,

I am very close to going live for my Squarespace site.  However, I cannot get the filter I purchased to look good.  Can someone help with the CSS please?  I've tried, but can't seem to dissect it to get it to look right.  The search on right should be wider and show it's a text input field.  Then the dropdowns the width isn't right and there's some line breaks because width needs to be fixed.  Otherwise I think it's close!

My site is here: https://activestatedesigns.squarespace.com/shop
Password: SiteTest

Filter plugin: Universal Filter: https://www.squarewebsites.org/universal-filter?password=UniFilterSecret

Thanks in advance!
Lorne

Hi. Please don't share Filter Plugin Code/Documentation on Forum. 

With your problem, try adding this to Design > Custom CSS

/* Filter plugin tweak */
@media screen and (min-width:992px) {
.custom-filter-container .customFiltersWrapper .customFiltersContainer {
    width: 100% !important;
    justify-content: space-between;
}

.custom-filter-container.custom-filter-view-modern .customFiltersWrapper .sqs-block {
    width: 15% !important;
}

.custom-filter-container.custom-filter-view-modern .sqs-block.custom-items-search .search-icon {
    position: relative;
    top: 15px;
}}

Thank you for the quick response, super helpful!  I took down the link, I thought that link was password protected, my apologies!  

I used the CSS you sent over, and it did layout the buttons nicer but a couple more tweaks I think:

1. The text inside the box is left aligned, how do I get it and the dropdown arrow to be centered?
2. When the dropdown is shown, the columns on inside are not aligned, how do I clean this up?  it should be in the order of my categories.
   
3. Any other suggestions you may have to clean this up?

Thanks in advance!

Lorne

Hello again,

Ok so I changed the theme of the dropdowns in the Universal Filter Plugin code injection.  It's looking good and I'm liking my options here.  

However, how do I make the width of the search box "Find my style..." to match the same width as the boxes above on a new line?  Is that asking too much to do?  If so, my second option is to get all the dropdowns on one line?

My site is here: https://activestatedesigns.squarespace.com/shop
Password: SiteTest

Here is the CSS I have thus far:

Quote

/* Filter plugin tweak */
@media screen and (min-width:992px) {
.custom-filter-container .customFiltersWrapper .customFiltersContainer {
    width: 100% !important;
    justify-content: space-between;
}

.custom-filter-container.custom-filter-view-modern .customFiltersWrapper .sqs-block {
    width: 15% !important;
}

.custom-filter-container.custom-filter-view-modern .sqs-block.custom-items-search .search-icon {
    position: relative;
    top: 15px;
  }}

.custom-filter-container.custom-filter-view-dropdowns .customFiltersWrapper .sqs-block {
  max-width: 200px;
}

.custom-filter-container.custom-filter-view-dropdowns .customFiltersWrapper .sqs-block .archive-group-list{
  max-height: 336px;
}
/* END Filter Plugin Tweak */

Thanks in advance!

Lorne

Hi,

It looks like you figured it out all, or still need help to make all dropdown same line?