Clementine Design Studio

View Original

Make All Accordion Divider Lines the Same Height

Squarespace’s new Accordion Blocks have been a godsend. But the dividers are a different story! They seem to change heights depending on what screen size you’re on, and they can look very uneven. The only real solution I’ve been able to find is to disable the dividers in the accordion settings and then adding borders manually using code. This method makes sure that all the dividers are even height!

First, disable the dividers on the accordion block. Then, put this code into Design -> Custom CSS:

See this content in the original post

Customize

  • To change color, replace #000000 with the color of your choice

  • To change the thickness of the divider, change 4px to the height of your choice