How to stop bullet point indent on Squarespace

Bullet points

Feb 20

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 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

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.

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!