DIY | Library | Accordion Block
Styling Squarespace Accordion Blocks with CSS
This post is all about making CSS adjustments to the Squarespace CSS accordion block. Accordion blocks are great for condensing content, but their default styling can be limiting. Below, you’ll find helpful accordion-style sections full of CSS snippets to adjust padding, icons, animations, background colours and more.
I’ll be adding new code over time as I come across it in projects, so feel free to check back or email me at sarah@foubography.com if you need help with something specific.
Just paste this bit of code in Design > Custom CSS and adjust accordingly.
-
/* Accordion: Text */
.sqs-block-accordion .accordion-items-container {
text-transform: lowercase !important;
font-family: courier;
line-height: normal !important;
}
/* Accordion: Text END */
-
/* Accordion Justify Text */
.sqs-block-accordion .sqs-block-content {
text-align: justify !important;
}
Related posts
This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.
