Help with CSS for Product Filter on site

HTML & CSS
1

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

1 Like
2

To start: Im testing on MacBook Air ( Monterey + all updates installed ). Browsers:

  • Safari
  • Chrome

Css class

browser independent thing
.search-input

Things to do:

  • RMC on searchbar > Diagnose ( Safari ) / Open WebTools ( Chrome )
  • Select Elements > Styles
  • Hover over searchbar > its class will be highlighted
  • (Un)check what you want.

Looks like this

Note if you are on Safari

Once you do your changes and refresh / reload page, Safari will load default CSS ( your changes will disappear ). To countermeassure this, you need to:

  • write your rules in separate CSS file > save it;
  • In Safari, go to Settings > Advanced > CSS and point to where you saved your CSS
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.