Error message using calc function (px - vw) to set responsive section height

Site URL: https://cyan-teal-3zmw.squarespace.com/case-study-equality-indicators

I'm working on a page with overlapping sections – one is inset with text, and one is full-width behind it as a background color – and I'm trying to get the background section height to expand as the text section on top of it expands. (Screengrab attached.) To achieve this, I'm using the calc function to make the height increase as the screen width decreases. Here's an example:

[data-section-id="6027ff54b347b32cf0c31df8"] {
  @media screen
  and (min-width: 1125px)
  and (max-width: 1400px) {
    min-height: calc(900px - 20vw)!important;
  }
}

This works for me when I test it in Inspector, but once it's live, I get this error message from Squarespace when inspecting the live CSS, which states that px + vw are incompatible units:

/* WARNING raised evaluating next rule: ExecuteError INCOMPATIBLE_UNITS: No conversion is possible from PX (pixels) to VW (viewport's width).. stripping unit. */

As a result of this, my calc function is being stripped and made static. I've seen plenty of instances of these units being combined though, so I know it's possible. Am I doing something wrong? Anyone have a workaround?

(Site password: governance)

On 3/23/2021 at 11:19 PM, dvgdvgdvg said:

Site URL: https://cyan-teal-3zmw.squarespace.com/case-study-equality-indicators

I'm working on a page with overlapping sections – one is inset with text, and one is full-width behind it as a background color – and I'm trying to get the background section height to expand as the text section on top of it expands. (Screengrab attached.) To achieve this, I'm using the calc function to make the height increase as the screen width decreases. Here's an example:

[data-section-id="6027ff54b347b32cf0c31df8"] {
  @media screen
  and (min-width: 1125px)
  and (max-width: 1400px) {
    min-height: calc(900px - 20vw)!important;
  }
}

This works for me when I test it in Inspector, but once it's live, I get this error message from Squarespace when inspecting the live CSS, which states that px + vw are incompatible units:

/* WARNING raised evaluating next rule: ExecuteError INCOMPATIBLE_UNITS: No conversion is possible from PX (pixels) to VW (viewport's width).. stripping unit. */

As a result of this, my calc function is being stripped and made static. I've seen plenty of instances of these units being combined though, so I know it's possible. Am I doing something wrong? Anyone have a workaround?

(Site password: governance)

Custom css use less so you can try this syntax

width: ~"calc(900px - 20vw)" !important;

more info: CSS3 calc() in LESS CSS (Example) (coderwall.com)

15 hours ago, bangank36 said:

Custom css use less so you can try this syntax

width: ~"calc(900px - 20vw)" !important;

more info: CSS3 calc() in LESS CSS (Example) (coderwall.com)

You're a lifesaver! I thought I was going to have to set like 30 media queries per page haha. Thank you!!