Jump to content

button alignment in mobile overlay menu

Recommended Posts

Site URL: https://www.rando.report/all-the-stuff

Hello, I'm using Universal Filter Plugin to create filters for the various blog subjects. It's working well. It's set to multiples, so you can click more than one. The ones selected are in a different color. Click again, they go back to the regular color.

On mobile, they show up as a menu overlay that slides out from the left. But I'm having two issues.

1) for some reason, the last button always ends up slightly out of alignment on the pop out mobile menu. Attaching screenshot. 

2) The multiple selection seems kind of wonky on mobile. It actually works right when I'm in the squarespace editor in mobile view. But when I use it on my phone, the buttons don't seem to work quite right when more than one is selected. Sometimes it works. Sometimes I click an additional filter button and it doesn't activate the button. Then I click another and the previous one activates. It's kind of just always a little off and wonky, but not in a really consistent way. And it's weird that it works in the squarespace editor on the mobile view, but not on my actual phone.

If anyone might be able to help with these two things I'd be really grateful. The misalignment in the attached screenshot it just making me crazy for some reason.

Thanks to anyone that might be able to help. @tuanphan

-daria

 

Screen Shot 2021-05-04 at 9.57.55 AM.png

Link to comment

Q1. Add to Design > Custom CSS

/* Align last filter buttons */
.custom-filter-container[class*=custom-filter-view-buttons] .filterDropdown.sqs-block .archive-group-list li:last-child {
    margin-right: 6px !important;
}

Q2. You should contact Filter plugin author.

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.