Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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)

overlapping-sections-height.jpg

Edited by dvgdvgdvg
Link to comment
  • Solution
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)

overlapping-sections-height.jpg

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)

image.png.d225c403506a1d5e2d53b3e5209795ad.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.