DIY | Library | List Section
Improve The styling of your List Sections with CSS in Squarespace
This post is all about customising the list section in your Squarespace site using CSS. There are lots of small tweaks you can make to improve them using CSS. Below, you’ll find a selection of code snippets sorted into accordion blocks for easy reference.
I’ll keep adding to this post as I come across more list tweaks in my projects. If you’re stuck or unsure how to apply any of the CSS, just drop me an email at sarah@foubography.com.
Just paste this bit of code in Design > Custom CSS and adjust accordingly.
-
#section-name {
h2.list-item-content__title {
font-size: 1.5rem !important;
font-family: georgia;
letter-spacing: 0em;
font-weight: lighter !important;
color: white !important;
background-color: rgba(0, 0, 0, 0.30);
padding: 1rem;
border-radius:.5em;
letter-spacing: 0.1rem;
}}
-
#section-name {
.list-item-content__description {
font-size: 20px !important;
color: white !important;
}}
-
#section-name {
a.list-item-content__button.sqs-block-button-element {
font-size: 20px !important;
color: white !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.
