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?

Share this post

Link to post

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.

Share this post

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 building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post

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...