Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to make CSS calc() function work on Custom CSS editor?




I have a custom html list whose items I try to show in three columns with flexbox. List items have padding to add room for item background.

li {
  flex: 0 0 calc(33% - 66px);
  padding: 0 16px 0 50px;
  background:  url('check.png') no-repeat left top;

The problem is that squarespace has some kind of preprocessor which converts calc() to this: (style copied from browsers inspector)

flex: 0 0 calc(-33%);

How should I write calc() to keep it in the desired format?

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

Thanks tuanphan, it works as there is no preprocessor for code blocks. 🙂

I just would prefer to put all custom code to the same place but if it's not possible I just have to use code blocks.

Link to post
  • 0

@Jfer00 This is because the 'Custom CSS' panel is actually the 'Custom LESS' panel 😁.

Any math operations in brackets are calculated first (33-66=-33) and then the CSS parsed. You can avoid this by using escaping it like this:

  flex: 0 0 calc(~"33% - 66px");


Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...