When you add a bullet point list to a Squarespace website, it automatically indents each point to the right.

Most Squarespace designers simply leave bullet point lists like this, but that’s not necessarily the right look for everyone.

If you’d rather keep the text in your bullet point lists aligned with the text above, you just need to add a little bit of code to your custom CSS.

Watch the video

Check out the YouTube video below 👇

Step-by-step

Once you’ve added your indented bullet point list, head to your custom CSS panel and add some new lines.

The code you then need to add in is:

// Move bullets back to left //

ul {
padding-left: 1rem
}

This code will remove the indent from your bullet point lists and will keep the text aligned to that above it.

Adding this in will target all of the bullet point lists you add to your Squarespace website. If you want to just target a specific list within a specified section, you’ll need to add the section ID to your custom CSS panel ahead of the code.

📩 Join the inner circle to get exclusive code updates

Don’t forget, finding the ID of a section is super simple thanks to the Squarespace ID Finder Chrome plugin from Heather Tovey. 

This is a really handy piece of code to have in your back pocket as a Squarespace designer. Whilst indented bullet point lists will usually work fine, sometimes removing the indent is necessary.

Give it a go and see which you prefer, indent or no indent!

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?