NickHart

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.

@creedon Exactly. Any ideas here? As I said, even trying to put spacers on either side of the summary block still causes the page-breaking issue in that pixel range. I saw other posts suggesting a min and/or max-width but that hasn't seemed to help..

@creedon Never mentioned mobile devices, although I suppose I should have specified desktop (I previously said "smaller screens" so I see where the confusion came from). The original post has now been edited to clarify. I am viewing this page (https://schwalbeandpartners.com/laurence-cummings-conductor) on both Chrome and Safari on a Macbook and it's pretty noticeable in both browsers - in fact Safari is even worse. I've attached two screenshots to show the white gap that appears on the right side of the page, first screenshot is Chrome and second screenshot is Safari.

@creedon As far as I can tell this is a desktop-only issue. I'm viewing it on a 2021 Macbook Air

A client of mine recently asked me if I could increase the summary blocks on pages to have the maximum amount of posts possible (30 is the limit if I'm not mistaken). This is a site for a classical music agency and PR is a very important part of it, so they want to display as many news stories (created as blog posts) for each musician as is possible. However I noticed that when you have 15 or more posts on display, such as can be seen on this page here (https://schwalbeandpartners.com/laurence-cummings-conductor), it breaks the page width (at least on small desktop screens). You can see the effect by scrolling to all the way to the right, and there is now some blank space there. Compare that to another page with 14 or less posts, such as this one: https://schwalbeandpartners.com/kathryn-mueller-soprano That one has no extra white space on the right side. I've seen other folks post about this and I've been driving myself a bit crazy trying to find the answer - haven't seen any good responses yet that actually solve this. I even tried putting spacer blocks on either side of the summary block so it doesn't take up the full page width, and it STILL has white space on the side!! Really bizarre that Squarespace haven't figured this out yet. Anyone have any ideas?? Thanks in advance. Please let me know if you need additional clarification.

I'm trying to create a parallelogram-shaped button (see codepen in link) on a Squarespace site for a client. I know that this is possible to do through pure HTML/CSS, as is demonstrated in the link. However, I'm wondering if I can do this by manipulating regular Squarespace buttons via CSS.. I've figured out half the problem (skewing the whole button), but now I'm trying to target the text within and counteract the skew so that the text is normal. This is tricky because unlike the codepen, the whole element is an anchor link, and there's no additional span or text element wrapping the text. I'm able to skew the button with the following code: .sqs-block-button { transform: skew(-20deg); } In the linked codepen, there is a span element inside the anchor element, which then has this applied to it: .skew-fix{ display:inline-block; transform: skew(20deg); } How can I apply those two lines of css to the text within the button, and keep the css on the button element the same? Or is there a better way to accomplish this?